01 说明页面要做什么
使用 ai-ui-designer 技能。 设计一个商品海报工具页面，包含商品名称、卖点输入、尺寸选择、生成按钮和结果展示网格。
把真实功能写进需求，比只说“做得好看”更具体。
先看设计稿，再动手开发 · Codex / Claude Code
免费的 UI 设计 Skill，让需求先变成设计稿
页面还没想清楚，不必急着写代码。把目标用户、内容和主要操作告诉 Codex 或 Claude Code，用 UI 设计 Skill 生成静态 SVG 线框图，再逐步打磨界面。无需购买场景包。
下载无需登录。交付静态 SVG；编程助手与模型使用费用另计。
从功能需求，到看得见的页面布局
先确认表单和操作位置，再讨论字体、配色与留白。
同一套需求，先排结构再做视觉
以商品海报工具为例：先梳理输入项、生成按钮和结果区，再细化视觉。两个 SVG 均可打开查看，展示免费技能无需付费场景包的工作方式。
安装 UI 设计 Skill，开始第一张线框图
下载并解压，将 ai-ui-designer 文件夹放入已有 Codex 或 Claude Code 环境的技能目录。
1.放入正确的技能目录
确保 SKILL.md 直接位于 ai-ui-designer 文件夹内。下载包包含设计指令、参考资料和辅助脚本。
- Codex
- ~/.agents/skills/ai-ui-designer/
- Claude Code
- ~/.claude/skills/ai-ui-designer/
注意不要多套一层解压目录。
2.描述页面、用户和主要操作
在助手中调用技能，说明页面用途和必须包含的内容。
Codex: $ai-ui-designer Claude Code: /ai-ui-designer 为我的产品首页设计 SVG 线框图，包含价值主张、功能介绍和注册入口。
3.打开文件，提出具体修改
用浏览器或 SVG 查看器检查设计，再提出明确反馈，例如突出主按钮、调整标题层级。
找不到技能时，检查目录和 SKILL.md。Codex 会自动检测变更，仍未显示可重启；Claude Code 可在 / 菜单中查找。
需自行准备编程助手和模型访问权限。本地场景包辅助脚本需 Python 3.9 或更高版本；下载本站可选场景包需有效付费订阅。
把界面设计拆成可确认的步骤
先理顺信息层级
用这项技能安排内容区块、输入项和主要操作，先用灰度线框图确认结构。
再调整视觉风格
在已确认布局上修改字体、间距、配色与插图，不必每次推倒重来。
围绕同一份稿持续迭代
把 SVG 保留在项目中，随着需求明确，继续让助手修改具体区域。
免费下载包含什么
从自己的需求开始
免费技能包含线框图、彩色界面设计、主题应用和本地场景包管理。
场景包只是可选设计参考，不下载也能使用免费流程。
设计稿与开发分别完成
产物是静态 SVG 和设计说明。稿子里的登录、支付或生成按钮不会执行真实业务。
应用代码、后端和交互需另行开发；助手可用性与模型计费遵循对应工具的条款。
下载前常见问题
- UI 设计 Skill 免费吗？要买场景包吗？
- Skill 可免费下载，直接按自己的需求设计。只有下载本站可选场景包时，才需要有效付费订阅；助手和模型的费用另计。
- Codex 和 Claude Code 怎么调用？
- 安装到上方对应目录后，在 Codex 使用 $ai-ui-designer，在 Claude Code 使用 /ai-ui-designer，再描述设计任务。
- 能直接生成可运行的网站吗？
- 这套流程输出静态 SVG 线框图和界面设计稿。可运行的网站、后端服务及真实交互需要单独实现。
- 安装后为什么看不到技能？
- 确认 ai-ui-designer 下直接包含 SKILL.md，且目录正确。Codex 中仍不显示可重启；Claude Code 中查看 /ai-ui-designer 命令。
让下一页从清晰的设计稿开始
下载 UI 设计 Skill，装入你的编程助手。先把需求变成可检查的 SVG 布局，再细化界面和推进开发。