Skilloop
前端设计

示意封面由本站生成，真实效果请查看源仓库示例。

如何使用

  1. 1

    复制安装提示

    登录后点击右侧黑色按钮，一键复制。

  2. 2

    粘贴给你的 agent

    在 Claude Code、Codex、Cursor 等工具里粘贴发送，它会自己装好。

  3. 3

    用一句话调用

    像下面这样说出你要做的东西，agent 会按这个 Skill 的流程来做。

你：/frontend-design 帮我做：不想看起来像模板的新界面或改版

示例对话，仅演示调用方式，不代表实际产出。

你会得到

  • 基于主题的设计原则
  • 规划 → 构建 → 审视循环
  • 字体与克制的指导

适合

  • 不想看起来像模板的新界面或改版

不适合

  • 后端或纯逻辑工作
许可证
Apache-2.0
作者
@anthropics
来源
anthropics/skills/skills/frontend-design · ★ 179,820
支持:Claude CodeCodexCursorGemini CLIOpenCode

上游描述

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

其他安装方式

更喜欢自己动手？下面的命令和上方按钮效果相同。

安装提示词（粘贴给你的 Agent）
Read https://skilloop.dev/skills/frontend-design/install.md and follow the instructions to install the skill.
一行命令安装 · Claude Code
npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design -g -a claude-code
一行命令安装 · Codex / Cursor
npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design -g -a codex
手动安装（git） · Claude Code
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/skills
mkdir -p ~/.claude/skills && cp -r /tmp/skills/skills/frontend-design ~/.claude/skills/frontend-design

作品版权归原作者所有，依其许可证分发；本站仅做链接与介绍。

相关技能

SaaS 落地页
免费
网页9.0k

SaaS 落地页

单页 SaaS 落地页：首屏、功能、社会证明、定价与 CTA，一个 HTML 文件搞定。

作者: nexu-ionexu-io/html-anything · Apache-2.0
高品位设计系统 DESIGN.md
免费
网页8.4k

高品位设计系统 DESIGN.md

生成 agent 友好的 DESIGN.md，约束高级、不雷同的 UI：严谨字体、校准色彩、非对称布局与微动效。

作者: google-labs-codegoogle-labs-code/stitch-skills · Apache-2.0
设计系统提炼
免费
网页8.4k

设计系统提炼

分析已有 Stitch 项目，把其语义化设计系统提炼成 DESIGN.md。

作者: google-labs-codegoogle-labs-code/stitch-skills · Apache-2.0
shadcn/ui 专家
免费
网页8.4k

shadcn/ui 专家

指导发现、安装和定制 shadcn/ui 组件，附带架构与主题最佳实践。

作者: google-labs-codegoogle-labs-code/stitch-skills · Apache-2.0