Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
Install Frontend Design
$ npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN frontend-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-design .claude/skills/frontend-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend-design" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/frontend-design into .claude/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/frontend-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN frontend-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/frontend-design .agents/skills/frontend-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-design" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/frontend-design into .agents/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN frontend-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/frontend-design .cursor/skills/frontend-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend-design" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/frontend-design into .cursor/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/LeastBit/Claude_skills_zh-CN.git --path skills/frontend-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN frontend-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/frontend-design .gemini/skills/frontend-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/frontend-design into .gemini/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install LeastBit/Claude_skills_zh-CN frontend-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/frontend-design .github/skills/frontend-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/frontend-design into .github/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install LeastBit/Claude_skills_zh-CN frontend-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/frontend-design .opencode/skills/frontend-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/LeastBit/Claude_skills_zh-CN/tree/main/skills/frontend-design into .opencode/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend-design- GitHub stars
- 588
- Token cost
- ~401 tokens
- SKILL.md length
- 44 words
- Files
- 2
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
- Frontend & Design work in your project
- SKILL.md covers 设计思维 and 前端美学指南
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Frontend Design is an agent skill from LeastBit/Claude_skills_zh-CN. 创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
Its SKILL.md is about 400 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.
It sits in Frontend & Design. It works with React. The repository describes itself as: Anthropics/skills中文学习版本 来自：https://github.com/anthropics/skills. The licence is Apache-2.0.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/frontend-design”
What it can do on your machine
Read from SKILL.md and the folder at commit 1ab2916. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend Design loads about 401 tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 44 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from LeastBit/Claude_skills_zh-CN at commit 1ab2916, republished under its Apache-2.0 licence (© LeastBit). 44 words, ~401 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-design/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- frontend-design
- description
- 创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
- license
- 完整条款见 LICENSE.txt
本技能指导创建独特的、生产级别的前端界面，避免千篇一律的"AI 流水线"审美。实现真正可用的代码，对美学细节和创意选择给予极致关注。
用户提供前端需求：需要构建的组件、页面、应用程序或界面。他们可能会提供关于用途、目标受众或技术约束的背景信息。
设计思维
在编码之前，理解上下文并确定一个大胆的美学方向：
- 目的：这个界面解决什么问题？谁在使用它？
- 基调：选择一个极端方向：极简主义、极繁主义混沌风、复古未来主义、有机自然风、奢华精致风、趣味玩具风、杂志编辑风、粗野主义原始风、装饰艺术几何风、柔和粉彩风、工业实用风等。有太多风格可供选择。以这些为灵感，但设计出真正符合美学方向的作品。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：什么让这个设计令人难忘？用户会记住的那一个亮点是什么？
关键：选择一个清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行——关键在于意图明确，而非强度高低。
然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），需满足：
- 生产级别且功能完善
- 视觉冲击力强且令人难忘
- 具有清晰美学观点的整体协调性
- 每个细节都精雕细琢
前端美学指南
重点关注：
- 字体排版：选择美观、独特、有趣的字体。避免使用 Arial 和 Inter 等通用字体；选择能提升前端美感的独特字体；出人意料的、有个性的字体选择。将独特的展示字体与精致的正文字体搭配。
- 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。主导色配合鲜明的强调色，效果优于胆怯的、平均分布的配色方案。
- 动效：使用动画实现效果和微交互。HTML 优先使用纯 CSS 解决方案。React 可用时使用 Motion 库。聚焦高影响力时刻：一个精心编排的页面加载动画配合错落有致的渐显效果（animation-delay）比零散的微交互更令人愉悦。使用能带来惊喜的滚动触发和悬停状态。
- 空间构图：出人意料的布局。不对称。重叠。对角线流动。打破网格的元素。大量留白或可控的密集感。
- 背景与视觉细节：营造氛围和层次感，而非默认使用纯色。添加与整体美学相匹配的情境效果和纹理。运用创意形式如渐变网格、噪点纹理、几何图案、叠加透明度、戏剧性阴影、装饰边框、自定义光标和颗粒覆盖层。
绝不使用千篇一律的 AI 生成审美，如过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏情境特色的模板化设计。
创造性地诠释并做出出人意料的选择，让设计真正契合情境。没有两个设计应该雷同。在浅色和深色主题、不同字体、不同美学之间变换。绝不在多次生成中趋同于常见选择（例如 Space Grotesk）。
重要：让实现复杂度匹配美学愿景。极繁主义设计需要精心编写的代码，包含大量动画和效果。极简主义或精致设计需要克制、精准，并仔细关注间距、字体排版和微妙细节。优雅来自于对愿景的出色执行。
记住：Claude 有能力创造非凡的创意作品。不要有所保留，展示当跳出思维定式并全情投入独特愿景时能真正创造的东西。
© LeastBit, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in skills/frontend-design of LeastBit/Claude_skills_zh-CN.
- SKILL.md
- LICENSE.txt
Open the folder on GitHubat commit 1ab2916
Compare with similar skills
Frontend Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend Design this skillLeastBit/Claude_skills_zh-CN | 588 | — | ~401 | Automated safety check: Pass | Apache-2.0 | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None | |
| GSAP Core Animationgreensock/gsap-skills | 16k | 4 repos | ~3.7k | Automated safety check: Pass | MIT |
Similar skills
- Official
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
GSAP Core Animation
greensock/gsap-skills
Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
More from LeastBit/Claude_skills_zh-CN
All 16 skills in this repoSkill Creator
LeastBit/Claude_skills_zh-CN
创建高效技能的指南。当用户想要创建新技能（或更新现有技能）以扩展 Claude 的能力，包括专业知识、工作流程或工具集成时，应使用此技能。
DOCX
LeastBit/Claude_skills_zh-CN
全面的文档创建、编辑和分析功能，支持修订追踪、批注、格式保留和文本提取。当 Claude 需要处理专业文档（.docx 文件）时使用：(1) 创建新文档，(2) 修改或编辑内容，(3) 处理修订追踪，(4) 添加批注，或其他任何文档任务
MCP Builder
LeastBit/Claude_skills_zh-CN
构建高质量 MCP（模型上下文协议）服务器的指南，使 LLM 能够通过精心设计的工具与外部服务交互。在使用 Python (FastMCP) 或 Node/TypeScript (MCP SDK) 构建 MCP 服务器以集成外部 API 或服务时使用。
PDF
LeastBit/Claude_skills_zh-CN
全面的 PDF 操作工具包，用于提取文本和表格、创建新 PDF、合并/拆分文档以及处理表单。当 Claude 需要填写 PDF 表单或以编程方式大规模处理、生成或分析 PDF 文档时使用。
PPTX
LeastBit/Claude_skills_zh-CN
演示文稿创建、编辑和分析。当 Claude 需要处理演示文稿（.pptx 文件）时使用，包括：(1) 创建新演示文稿，(2) 修改或编辑内容，(3) 处理版式，(4) 添加批注或演讲者备注，或其他任何演示文稿任务
Web Artifacts Builder
LeastBit/Claude_skills_zh-CN
用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。
Related
Works with
Categories
Questions about Frontend Design
What does Frontend Design do?
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。. Frontend Design is an agent skill from LeastBit/Claude_skills_zh-CN.
When should I use Frontend Design?
Frontend Design fits situations like: frontend & Design work in your project.
How do I install Frontend Design in Claude Code?
Run `npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a claude-code`. Or copy the skill folder (skills/frontend-design in LeastBit/Claude_skills_zh-CN) into .claude/skills/frontend-design in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Design in Codex?
Run `npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a codex`. Or copy the skill folder (skills/frontend-design in LeastBit/Claude_skills_zh-CN) into .agents/skills/frontend-design in your project. Codex loads it when a task matches its description.
Can I use Frontend Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add LeastBit/Claude_skills_zh-CN --skill frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-design, .gemini/skills/frontend-design, .github/skills/frontend-design and .opencode/skills/frontend-design in your project.
What does Frontend Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Frontend Design is instructions for the agent only.
Does Frontend Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Frontend Design use?
Frontend Design is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Design use?
About 401 tokens (SKILL.md is roughly 1.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Frontend Design?
Skills that share tags, products or a category with Frontend Design: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), React Router Development (remix-run/react-router, 57k stars) and React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Design?
LeastBit (a GitHub user) maintains it in LeastBit/Claude_skills_zh-CN, which has 588 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on January 19, 2026.
Source: LeastBit/Claude_skills_zh-CN on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.