SkillFoxx

web-design skill

A web-design skill for Claude Code: a DESIGN.md spec first, then code that follows it

  • 815 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • Scripts crawl reference sites via Playwright and fetch images from Unsplash
  • The skill generates and writes page code into the project
All reasons and checks

xiaopu-ai/web-designAuthor:KAOPU-XiaoPu

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/web-design

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • Scripts crawl reference sites via Playwright and fetch images from Unsplash
  • The skill generates and writes page code into the project

This is third-party code. Review the repository files before installing.

What it does

The skill splits web-page work into two steps: the spec first, then the code. It accepts a PRD, a reference URL, a screenshot, keywords or a brand name in any combination and extracts design cues from them. It then assembles a DESIGN.md file with sections on color, type, components, layout, motion, depth, responsiveness and accessibility, which you edit and keep in the project. After you approve it, the skill generates code strictly by the spec and self-checks it against a checklist. It bundles references on design systems, patterns and motion, plus scripts to crawl sites and fetch images.

Who it is for. For designers and developers who want a web interface with a single spec rather than scattered code.

Good fit when

  • You need a landing page, portfolio or product page with a coherent style
  • You want to fix the design in a DESIGN.md first, then the code
  • You have a reference or screenshot and need your own page from it

Not a fit when

  • The task is backend, database or a logic bug rather than the page look
  • You do not want a separate spec and only need quick draft code

Example request

Produce a DESIGN.md and a landing page from this reference, but with a warmer palette

Limitations

The skill targets web frontend, not backend or logic bugs. Crawling reference sites uses Playwright and image fetching uses Unsplash, which need network and a local environment. Running the demo page locally needs an http server; opening it via file does not work.

How to disable. Remove the web-design folder from the Claude Code skills directory.

FAQ

What is DESIGN.md?

A nine-section spec: color, type, components, layout, motion, depth, rules, responsiveness and accessibility. You can edit it by hand and keep it in the project.

Can I give a reference?

Yes, it accepts a PRD, a URL, a screenshot, keywords and a brand name in any combination.

Discussion

No questions or reviews yet.

Skills

A skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter

SkillExtended access1K

A Claude skill that turns sites, images and Figma files into a design system: Markdown, DTCG tokens and element rebuild prompts

SkillExtended access245

A design engine skill for local agents: mockups, prototypes, landing pages, dashboards and slides as self-contained HTML right in your editor

SkillExtended access6.4K11

A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.

SkillExtended access51

A frontend design skill with eight aesthetic anchors: each fixes palette, type and texture in CSS tokens. A separate project, not from Anthropic

SkillMinimal access166

README in short

The README describes web-design as a Claude Code skill that outputs a DESIGN.md first and then the code. Work runs in three phases: understand the input, assemble a nine-section spec and generate code strictly by it with a checklist self-audit and a diff against the reference. The repo holds SKILL.md, references on design systems, patterns and motion, Playwright scripts to crawl sites and fetch images, and a demo landing page. Install clones into the Claude Code skills directory. MIT licensed.

README badge

Original SKILL.md

---
name: web-design
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  生成项目代码
```

**启动时先检测**（按优先级）：
1. 项目里已经有 DESIGN.md 了吗？→ 有则沿用/修改/重建
2. 项目里有 PRD.md 吗？→ 有则进入 A4（PRD 驱动流程）
3. 都没有 → 正常走 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"）。

Report a problem