前端设计工具

面向个人开发者的前端界面设计助手，产出有辨识度的高质量页面。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。

功能说明: 本技能涵盖 中文交互、化工作流场景 等核心能力。

前端设计工具（免费版）

概述

本工具帮助个人开发者摆脱「模板感」，产出有辨识度的高质量前端界面。免费版围绕「色彩 + 字体 + 版式 + 签名元素」四件套设计令牌，配合反模板自检与基础质量底线，适合单页落地页与组件级设计。

核心能力

能力	说明	免费版范围
设计令牌	4-6 个命名色值 + 2 个以上字族 + 版式概念	单页方案
反模板自检	对照三大默认外观做差异化校准	自动提示
质量底线	响应式、键盘焦点、减弱动效	基础三项
输出	HTML/CSS 代码与设计说明	单页/单组件
技术实现要点：核心能力基于input_params参数与output_format配置实现,支持创建/查询/修改/删除等操作模式,通过config_options进行运行时配置。

核心功能执行

用input_params参数进行配置。

输出: 返回核心功能执行的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置。

输出: 返回参数配置与调用的执行结果,包含操作状态和输出数据。

• 执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置。

输出: 返回结果处理与输出的执行结果,包含操作状态和输出数据。

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：面向个人开发者的、前端界面设计助手、产出有辨识度的高、质量页面、面向个人开发者与、独立设计者的前端、界面设计工具、签名元素四件套设、计令牌生成、反模板化自检与差、可访问性、动效克制的基础质、单页落地页与组件、级设计方案输出等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景一：为产品落地页生成设计令牌

用户给出一句话定位，工具产出四件套令牌。

text

输入：面向独立开发者的极简记账工具，希望传递「冷静、可靠、不喧哗」

输出令牌：
  色彩: ink #1A1D24 / paper #F6F4EF / sage #7C9885 / clay #C77B5A
  字体: 标题 Fraunces（衬线展示）/ 正文 Inter
  版式: 左对齐叙事，hero 用一句主张 + 一个真实数字
  签名: 账目数字以等宽字体呈现，模拟账本刻印感

场景二：反模板自检

text

自检项：
  [ ] 是否落入「暖米底 + 高对比衬线 + 赤陶强调」默认外观？
  [ ] 是否落入「近黑底 + 酸绿/朱红强调」默认外观？
  [ ] 是否落入「报纸栏 + 零圆角 + 细规线」默认外观？
若任一为是 → 重新选择一个轴做差异化。

场景三：组件级视觉方案

html

<!-- 签名元素：账本刻印数字 -->
<div class="balance">
  <span class="balance__amount">¥12,480.00</span>
  <span class="balance__label">本月结余</span>
</div>

<style>
  .balance__amount {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
</style>

不适用场景

以下场景前端设计工具不适合处理：

• 无明确技术栈的模糊需求
• 纯架构设计决策
• 运维部署管理

触发条件

需要代码生成、编程辅助、调试测试、开发部署时使用。不适用于非本工具能力范围的需求。

快速开始

1. 用一句话描述产品定位与希望传递的感受。
2. 工具产出四件套令牌并做反模板自检。
3. 按令牌编写 HTML/CSS，每个颜色与字体决策都来自令牌。
4. 交付前过一遍质量清单。

bash

# 本地预览（任选其一）
python -m http.server 8000
npx serve .

结果处理: 执行完成后,查看输出结果确认操作状态。成功时输出包含处理摘要和结果数据;失败时根据错误信息排查问题,查阅错误处理章节获取恢复步骤。

示例

CSS 变量化令牌，便于全局调整：

css

:root {
  --color-ink: #1A1D24;
  --color-paper: #F6F4EF;
  --color-sage: #7C9885;
  --color-clay: #C77B5A;
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

优选实践

• hero 是论点：用最具特征的一件事开场，而非「大数字 + 小标签 + 渐变」模板答案。
• 字体承担性格：展示体与正文刻意搭配，别用 Inter/Roboto 当展示体。
• 结构即信息：编号、分隔线、标签应编码真实内容，而非装饰。
• 克制动效：编排一个时刻胜过散落特效；过度动效反而显 AI 味。
• 先令牌后代码：确认令牌唯一性后再写代码，颜色与字体一律从令牌派生。

常见问题

Q1：设计总像「科技创业」模板怎么办？ A：检查是否用了白底紫蓝渐变、圆角卡片居中 hero。换掉其中一两个轴即可破模板。

Q2：免费版能做多页站点吗？ A：免费版聚焦单页与组件。多页站点与设计系统请用专业版。

Q3：一定要用展示衬线吗？ A：不一定。展示体可以是任何有性格的字族，关键是与正文区分并服务于主题。

Q4：动效越多越好吗？ A：相反。一个编排好的时刻通常比散落特效更有力，过度动效会暴露 AI 生成感。

Q5：免费版支持设计系统输出吗？ A：不支持。设计系统、组件库与多主题为专业版能力。

进阶用法

从产品定位推导令牌

把一句话定位拆解为可执行令牌，是免费版的核心工作流：

text

定位: 面向独立开发者的极简记账工具，传递「冷静、可靠、不喧哗」

推导链:
  冷静 → 低饱和度 → 主色 sage（莫兰迪绿），避开纯黑
  可靠 → 衬线展示体 → Fraunces 带来「账本」般的稳重
  不喧哗 → 左对齐叙事 → hero 用主张+数字，不用渐变

最终令牌:
  色彩 ink/paper/sage/clay
  字体 Fraunces + Inter
  版式 左对齐、账本刻印数字

反模板差异化轴

当检测到落入默认外观时，从以下轴选一个做差异化：

差异化轴	操作
字体	换展示体（衬线/手写/等宽）
色温	从暖米切冷灰，或反之
圆角	全局零圆角或大圆角
栅格	非对称分栏代替居中
节奏	短长句交替、留白比例

质量清单

交付前逐项核对：

text

[ ] 令牌唯一，无硬编码色值
[ ] hero 是论点而非模板答案
[ ] 展示体与正文区分且服务于主题
[ ] 响应式在 375/768/1280 三档正常
[ ] 键盘焦点可见
[ ] 尊重 prefers-reduced-motion
[ ] 图片有 alt 且有尺寸

设计自查表

• 辨识度：去掉 logo 还能认出是你的产品吗？
• 克制：动效是否只服务一个关键时刻？
• 可读：正文字号、行高、对比度是否舒适？
• 一致：颜色与字体是否都从令牌派生？
• 真实：结构是否编码了真实内容而非装饰？

依赖说明

运行环境

• Agent 平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI 等）
• 操作系统: Windows / macOS / Linux
• 浏览器: 任意现代浏览器用于预览

依赖详情

依赖项	类型	是否必需	获取方式
Google Fonts	字体资源	推荐	fonts.google.com 引入
LLM API	API	必需	由 Agent 内置 LLM 提供

API Key 配置

• 本工具为纯 Markdown 指令，无需额外 API Key
• 字体资源通过 CDN 引入，无需鉴权

可用性分类

• 分类: MD+EXEC（Markdown 指令 + 命令行预览）
• 说明: 通过自然语言指令驱动 Agent 产出设计令牌与前端代码

错误处理

错误场景	原因	处理方式
配置错误	参数缺失或格式错误	检查依赖说明中的配置要求
运行时错误	运行环境不满足	确认运行环境符合依赖说明
网络错误	连接超时或不可达	执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

已知限制

• 需LLM支持,无LLM环境不可用
• 复杂业务场景建议结合人工经验判断
• 执行效率受模型能力与网络环境影响
• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

安全注意事项

风险类型	防范措施
API密钥泄露	通过环境变量配置，禁止硬编码到代码或配置文件中
命令执行风险	仅执行白名单命令，避免拼接用户输入到命令行参数中
网络通信安全	使用HTTPS协议，验证SSL证书有效性
敏感数据暴露	输出结果中不包含密钥、令牌等敏感信息

使用前请确认已阅读依赖说明章节，确保运行环境满足安全要求。