Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX 做一个""把这个截图/PRD 做成网页""做一个 landing page""出一份 design 规范"时触发。不用于后端、数据库、纯逻辑 bug 修复。
Passed 20 of 22 test cases with the skill, and 7 of 22 without it.
and 18 more in the full report
13 fixed7 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 13 test cases the skill fixed. Same model, same prompt, with and without the skill.
In section 8 (Do's and Don'ts) of DESIGN.md, what is the minimum required total number of rules, and how many of those must specifically be negative rules (Don'ts)?
| Checked | Without skill | With skill |
|---|---|---|
| Requires at least 8 total rules in the Do's and Don'ts section. | Passed | Passed |
| Requires at least 5 Don'ts within the Do's and Don'ts section. | Missed | Passed |
The instructions your model reads when the skill loads.
Web 端视觉设计 SKILL。两阶段工作流：先出规范（DESIGN.md），再出代码。
DESIGN.md 是显式文件产物，保存到项目目录，可跨项目复用、可手动修改、可给其他工具消费。
Phase A 理解需求（灵活输入）──→ Phase B 输出 DESIGN.md（用户确认）──→ Phase C 生成项目代码
启动时先检测（按优先级）：
输入是灵活的，以下任意组合都行，不要强制用户走固定路径：
| 输入 | 处理方式 |
|---|---|
| 参考 URL | 抓取 HTML+CSS，提取 Token，motion audit |
| 截图 / 设计稿 | 从视觉提取气质、色温、密度、字体风格 |
| 关键词 / 描述 | "暗色克制衬线风格" → 从 style-seeds 匹配 Token |
| 品牌名 | "做成类似 Linear 的" → 先查 references/design-systems/，有则直接读取；无则抓取该网站 |
| 混合 | "参考这个 URL 但配色要暖一些" → 提取 + 覆盖 |
| PRD 文档 | 读取 PRD.md 的产品定位、页面结构、设计交接区 → 分析竞品风格 → 推导设计方向 |
意图判断：参考（提取设计语言，做独立新页面）vs 复刻（用户明确说"复刻/clone"）。
抓取流程（按优先级尝试）：
test cases passed, vs 7 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.