web-design-studio

网页设计工作室

打造完整的静态网站，具有鲜明的视觉概念、完善的内容、原创的栅格图像，并经过浏览器验证。使用 frontend-design 把控艺术指导和界面品质。所有新建的栅格素材都使用 imagegen 生成。

操作边界

• 仅生成独立的 HTML、CSS 和 JavaScript。
• 保留现有静态网站的结构和惯例。
• 对于空项目，默认使用 index.html、styles.css、script.js 和 images/。
• 不要迁移、初始化或重写 React、Vue、Next.js、Svelte 或其他框架项目。将这类请求交由相应的前端技能处理。
• 如果存在 .openai/hosting.json，请改用 Sites 技能，不要采用此独立工作流。
• 除非用户另行提出要求，否则不要部署、发布或添加托管配置。
• 除非用户明确要求，否则不要生成设计交接文档。

工作流

1. 检查项目

编辑前，检查：

• 现有入口页面、样式表、脚本和素材目录
• 项目说明和用户编写的更改
• 用户提供的品牌素材、文案、参考资料和必需内容
• 当前导航、交互、元数据和响应式行为

除非用户另有说明，否则应将现有内容和素材视为有意保留。切勿仅为套用默认文件布局而替换可正常运行的结构。

2. 明确产品和内容

开始视觉实现前，确定以下内容：

• 页面用途和主要用户操作
• 目标受众和决策场景
• 信息层级和版块顺序
• 必需的交互和转化节点
• 内容限制、事实性声明以及法律或品牌要求

撰写具体且契合产品的文案。不要使用 Lorem Ipsum、占位标签、虚构的用户评价、捏造的数据、无依据的声明或空洞的“功能卡片”填充内容。缺少事实时，应使用中性、非事实性语言，或明确标注为可由用户编辑的文案。

3. 确定一种艺术指导方向

根据主题选择明确的概念：编辑风、精致奢华、工业风、活泼风、有机风、粗野主义、复古未来主义、极简、极繁，或其他经过审慎设计的方向。编码前先定义令人印象深刻的视觉构想。

建立精简的设计系统：

• 展示字体和正文字体，并提供可靠的回退字体
• 使用 CSS 变量定义主色、辅助色、强调色、表面色和文字色
• 定义间距节奏、网格、容器宽度、圆角、边框和阴影
• 设计响应式布局和图像裁切行为
• 为进入、悬停、聚焦和滚动状态设计克制的动效语言

除非品牌确实需要，否则避免使用常见的 AI 风格：默认系统字体、白底紫色渐变、重复的圆角卡片、千篇一律的居中主视觉、过度发光、随意使用毛玻璃效果，以及没有明确目的的装饰性动效。实现的复杂度应与设计概念相匹配。

4. 规划每项视觉素材

在内容结构和艺术指导方向确定后，制定明确的素材需求说明。所有新建的栅格视觉素材都必须使用 Codex 生成，包括主视觉图、产品图像、编辑摄影、插画和纹理。

保留用户提供的徽标、品牌标识、照片和参考素材。对于精确的界面图标、必须保持矢量格式的徽标、简单几何图形、图表和结构性装饰，请使用 HTML、CSS 或 SVG。

对于每项栅格素材，定义：

• 用途、位置和最终文件名
• 宽高比、裁切方式、主体位置和响应式行为
• 邻近内容所需的安全区域和负空间
• 主体、环境、媒介、光线、色彩和材质
• 仅在图像中必须出现文字时，注明准确文字
• 不可变要求、禁止元素和生成缺陷风险

5. 使用 Codex 生成

通过 imagegen 技能使用内置的 image_gen 工具。

• 不要使用图库图片搜索、外部生成服务或项目本地生成脚本。
• 每个不同的素材或变体调用一次生成工具。
• 仅在参考素材对身份、风格、构图或产品细节有实质限制时使用。
• 检查每个输出的主题准确性、裁切、安全区域、文字保真度、解剖结构、重复对象、水印和视觉瑕疵。
• 如果输出不可用，进行一次有针对性的修正。
• 编辑、透明背景和回退策略遵循 imagegen 的说明。

在适用时使用考虑放置位置的提示词：

Use case: <product-mockup | ads-marketing | photorealistic-natural | illustration-story | stylized-concept>
Asset type: <hero | product image | editorial image | illustration | texture>
Primary request: <essential visual>
Scene/backdrop: <environment>
Subject: <main subject>
Style/medium: <photography | illustration | 3D | collage>
Composition/framing: <aspect ratio, crop, subject placement, safe areas, negative space>
Lighting/mood: <lighting and emotional tone>
Color palette: <interface-aligned palette>
Text (verbatim): "<exact text only when required>"
Constraints: <must preserve or include>
Avoid: watermarks, unintended text, logos, clutter, malformed details, generic stock styling

Codex 默认将内置输出保存在 $CODEX_HOME/generated_images/ 下。对于项目专用素材：

1. 如果项目尚无既定的素材目录，则创建 images/。
2. 将选定的输出复制或移动到项目中。
3. 使用描述性 kebab-case 文件名，例如 ceramic-mug-hero.png。
4. 除非明确要求，否则不要覆盖现有素材；应另建同级文件，例如 ceramic-mug-hero-v2.png。
5. 绝不要让被引用的网站素材只保存在 $CODEX_HOME 下。

6. 完整实现网站

• 使用语义化地标和逻辑清晰的标题层级。
• 设置准确的文档语言、标题、元描述、视口和相关社交元数据。
• 构建响应式布局，避免出现水平溢出。
• 使用支持键盘操作、焦点状态清晰、标签明确且状态正确的真实链接和控件。
• 添加有用的 alt 文本；纯装饰性图片使用空 alt 文本。
• 声明图片尺寸或宽高比，避免布局偏移。
• 优先加载首屏主图，并对首屏以下的图片进行延迟加载。
• 使用渐进增强，确保禁用 JavaScript 时核心内容和导航仍可用。
• 支持 prefers-reduced-motion，避免仅依赖悬停的交互。
• 让 JavaScript 专注于实际行为；避免臆测的状态或不必要的库。
• 不要留下占位内容、失效链接、注释掉的模拟区块或意外的外部图片依赖。

7. 预览和验证

将 SKILL_DIR 解析为包含此 SKILL.md 的目录。验证本地视觉素材：

python3 "$SKILL_DIR/scripts/verify_images.py" \
  --html-dir . \
  --images-dir images

交付前修复所有缺失的引用。浏览器控制可用时，在本地运行网站，并检查约 390 px、768 px 和 1440 px 的典型宽度。检查：

• 首屏构图和内容层级
• 导航、按钮、表单和键盘顺序
• 焦点状态、减少动态效果和触摸行为
• 文本换行、溢出、图片裁切和加载
• 控制台错误和失效的本地请求

如果无法使用浏览器控制，请执行静态检查，并说明无法进行浏览器视觉 QA。

8. 仅在用户要求时生成中文交付文档

当用户明确要求设计规格说明或客户交付文档时，在验证网站和素材后生成：

python3 "$SKILL_DIR/scripts/generate_design_doc.py" \
  --project-name "Project Name" \
  --output "design-doc-project.html" \
  --html-file "index.html"

文档中的固定标题、标签、默认指导内容和说明文字使用简体中文。保留项目名称和用户提供的源内容。手动填写的说明性值（例如 --design-concept、--target-audience、--design-goals 和 --features）使用简体中文，除非用户要求使用其他语言。

9. 交付

确认：

• 静态网站完整且可正常使用
• 所有新创建的栅格视觉素材均由 Codex 生成并存放在项目中
• 所有本地视觉素材引用均可正常解析
• 已实现无障碍支持、响应式行为、元数据和减少动态效果支持
• 浏览器 QA 在可用时已完成
• 未在用户未要求时生成设计文档

报告入口页面、生成的素材路径、执行的验证，以及用户明确要求的任何中文交付文档。