用途
Tushar Design 是一个用于构建生产级前端界面的技能，它把一套经过验证的设计系统与交互规则封装成可配置的流程。它的定位是“有主张的默认值”：不提供无限自由，而是先通过 4 个问题把项目配置到一套明确的视觉与交互框架中，然后输出完整、可运行的实现。它明确声明输出永远是完整的功能实现，而不是 mockup，也不是 wireframe。
主要能力
配置流程
在编写任何代码之前，技能要求先一次性提出 4 个问题，每个问题用编号列表呈现，并清楚显示默认值：
- 基础底色（Foundation）：Void Black（#0a0a0a，默认）、Off-white（#FAFAF7）、Warm Dark（#110E0B）、Cool Slate（#0B0F1A）、Pure White（#FFFFFF）。
- 强调色（Accent）：只展示与所选底色协调的强调色。
- 字体搭配（Typography）：Geist + JetBrains Mono（默认）、Instrument Serif + Geist Sans、Bricolage Grotesque + JetBrains Mono、DM Sans + DM Mono、Syne + Space Mono、Plus Jakarta Sans + Fira Code。
- 动效级别（Motion）：Static（仅 CSS 过渡）、Subtle（入场淡入与错峰）、Full（页面加载编排、悬停状态、滚动触发）。
颜色系统
提供 5 种基础底色的完整色板，每种都定义了 bg、surface、surface-raised、border、border-hover、text、muted、heading 八个变量。强调色共 8 种，并标注了各自最适合的底色与原因：Ember Orange（#FF5E33）、Amber Gold（#E8C547）、Teal Jade（#14B8A6）、Electric Blue（#3B82F6）、Coral Rose（#F43F5E）、Sage Emerald（#10B981）、Deep Violet（#8B5CF6）、Sand Nude（#C4A882）。规则明确：只使用一个强调色，它只出现在激活状态、::selection、悬停边框提升、图标按钮和关键数据点上，主 CTA 永远不使用强调色。
字体系统
6 组字体搭配分别指定了 Display、Body、Mono 字体及来源（@fontsource/geist 或 Google Fonts）。无论选择哪组，都强制应用统一的排版规则：Display/h1 使用 letter-spacing: -0.02em、line-height: 1.1；正文 line-height: 1.7、font-size: 15px；标签使用等宽字体、11px、大写、letter-spacing: 0.12em、muted 颜色；始终启用 webkit-font-smoothing: antialiased；使用 Geist 时启用 font-feature-settings: "ss01" on, "cv01" on。
组件契约
技能定义了不可协商的组件结构模式，包括 Card、Primary CTA、Secondary CTA、Label/Section header、Badge/Pill、Input（下划线样式）。每个组件都给出了具体的 CSS 属性与过渡效果。此外还有一组硬编码的标志性细节，无论用户选择什么配置都始终生效：::selection 使用强调色混合、自定义滚动条（6px 宽、border-hover 滑块）、全局字体平滑。
布局与动效
布局系统规定内容最大宽度为 max-w-2xl（640px），宽布局为 max-w-5xl；页面内边距 px-6 py-12 sm:py-16；区块间距最小 mb-16，主要分隔用 mb-28；卡片网格 gap-4；布局分隔完全依靠边框，不用 box-shadow 作为分隔线。动效契约给出了默认入场、错峰列表的具体 Framer Motion 参数，并要求始终包含 reduced motion 回退。
UX 法则与文案规范
技能内置了 8 条 UX 法则的应用方式，包括 Hick's Law（导航最多 4 项、每页最多 3 个主 CTA）、Fitts's Law（主 CTA 最小 44px 高）、Miller's Law（列表不超过 7 项）、Law of Proximity、Aesthetic-Usability Effect、Jakob's Law、Law of Common Region、Serial Position Effect。文案方面要求默认小写、具体优于模糊、CTA 遵循动词+宾语+箭头格式、禁止模糊措辞、禁止空泛形容词（powerful、seamless、robust、comprehensive、cutting-edge 被禁用）、禁止 em dash、页脚始终包含 "built by @[handle]"。
Logo 资源规范
公司/工具 SVG 来自 simple-icons 库，组织 favicon 来自 Google favicon 服务，人物头像来自 GitHub 头像地址，并规定了各自的圆角与背景样式。明确禁止使用占位图或随机 CDN 地址作为品牌资源。
使用方式
该技能以 skills.sh 上的技能形式提供，来源为 tushaarmehtaa/tushar-skills。使用时，技能会先向用户提出 4 个配置问题，用户回答后，技能在每次实现的开头输出一个 CSS 变量块（包含颜色、字体、字号、圆角等变量），然后生成完整可运行的代码。如果范围较大，技能会询问先构建哪个区块，并且不会在未标记的情况下交付部分实现。
适用场景
适用于创建页面、仪表盘或组件，尤其是希望快速获得统一、精致、有明确设计主张的前端实现的场景。它适合需要生产级代码而非设计稿的开发者，也适合希望把一套设计系统固化为可复用流程的团队。
限制
该技能是“有主张的”设计系统，默认值明确，配置选项有限（5 种底色、8 种强调色、6 组字体、3 档动效）。它要求先回答 4 个问题再写代码，且组件契约、标志性细节、UX 法则和文案规则都是不可协商的。关于收费、价格、平台支持范围、具体效果等事实，资料中暂未提供。