🎨
FrontendPython

Web Design

by xiaopu-ai

Web Design is a Frontend skill for Claude Code, published by xiaopu-ai in web-design.

611 stars51 forkson xiaopu-ai/web-designAdded 2026/07/16Repository updated 2026/06/24
claude-codeclaude-skilldesign-systemwe-bweb-designwebdesignxiaopu
Install in seconds
Install Web Design
Copy Web Design into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/xiaopu-ai/web-design ~/.claude/skills/web-design

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/xiaopu-ai/web-design.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
SKILL.md in xiaopu-ai/web-design
Installs to
~/.claude/skills/web-design
Collection
The only skill cataloged from this repository
Category
Frontend732 skills

What Web Design does

Creates a DESIGN.md specification from your inputs (PRD, URL, screenshot) and then generates complete, production-ready frontend code for landing pages, portfolios, blogs, product pages, and more.

Web Design is cataloged under Frontend on DirSkills. Web Design comes from a repository tagged claude-code, claude-skill, design-system, we-b and web-design.

Documentation

README

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 时)

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Web Design

  • How does Web Design compare to other Frontend skills?

    Web Design ranks #478 by stars among the 732 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Web Design against them. Open each page to compare what they document and how they install.