AI SummaryWeb 端视觉设计 SKILL。两阶段工作流：先出规范（DESIGN.md），再出代码。 DESIGN.md 是显式文件产物，保存到项目目录，可跨项目复用、可手动修改、可给其他工具消费。 1. 项目里已经有 DESIGN.md 了吗？→ 有则沿用/修改/重建
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "web-design" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/web-design && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/web-design/SKILL.md "https://raw.githubusercontent.com/KAOPU-XiaoPu/web-design/main/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX 做一个""把这个截图/PRD 做成网页""做一个 landing page""出一份 design 规范"时触发。不用于后端、数据库、纯逻辑 bug 修复。
Web Design
Web 端视觉设计 SKILL。两阶段工作流：先出规范（DESIGN.md），再出代码。 DESIGN.md 是显式文件产物，保存到项目目录，可跨项目复用、可手动修改、可给其他工具消费。
核心流程
` Phase A 理解需求（灵活输入）──→ Phase B 输出 DESIGN.md（用户确认）──→ Phase C 生成项目代码 ` 启动时先检测（按优先级）： • 项目里已经有 DESIGN.md 了吗？→ 有则沿用/修改/重建 • 项目里有 PRD.md 吗？→ 有则进入 A4（PRD 驱动流程） • 都没有 → 正常走 Phase A ---
Phase A: 理解需求
输入是灵活的，以下任意组合都行，不要强制用户走固定路径： | 输入 | 处理方式 | |------|---------| | 参考 URL | 抓取 HTML+CSS，提取 Token，motion audit | | 截图 / 设计稿 | 从视觉提取气质、色温、密度、字体风格 | | 关键词 / 描述 | "暗色克制衬线风格" → 从 style-seeds 匹配 Token | | 品牌名 | "做成类似 Linear 的" → 先查 references/design-systems/，有则直接读取；无则抓取该网站 | | 混合 | "参考这个 URL 但配色要暖一些" → 提取 + 覆盖 | | PRD 文档 | 读取 PRD.md 的产品定位、页面结构、设计交接区 → 分析竞品风格 → 推导设计方向 |
A1. URL 分析（有参考 URL 时）
意图判断：参考（提取设计语言，做独立新页面）vs 复刻（用户明确说"复刻/clone"）。 抓取流程（按优先级尝试）： • 首选：Playwright 爬虫（真实浏览器，能绕反爬、渲染 SPA、模拟滚动） `bash python3 scripts/crawl_website.py --url [URL] --output ./crawl-output --scroll-delay 600 ` 输出：每屏视口截图 + tokens.json + structure.json + styles.css • 备选：Token 提取脚本（轻量，适合简单静态站） `bash python3 scripts/extract_design_tokens.py --url [URL] --format json ` • 降级：手动 curl（脚本都不可用时） `bash curl -Ls [URL] ` 综合三类输入判断：实际体验（氛围节奏）> 截图（局部气质）> Token 数值（精确参数）。Playwright 爬虫的视口截图可直接作为"体验"和"截图"两类输入。 Motion Audit（参考站有滚动联动动效时必做）： • 触发信号：动效跟随滚动连续变化 / 模块间有 stagger-pin-parallax / 引用 GSAP-Lenis 等 • 记录每个动效区块的 trigger、driver、elements、effect、timing 降级链路： • Playwright 爬虫失败 → 查 references/design-systems/ 有无该品牌预置文件（58 个品牌） • 预置文件也无 → extract_design_tokens.py 尝试静态提取 • 静态提取也失败 → 手动 curl CSS • 全部失败 → 要求用户提供截图，从视觉手动建 Token
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster