Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Onevium/awesome-claude-skills --skill frontend-aesthetic-directiongit clone --depth 1 https://github.com/Onevium/awesome-claude-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/onevium/awesome-claude-skills/frontend-aesthetic-direction)<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/frontend-aesthetic-direction"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/frontend-aesthetic-direction/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/frontend-aesthetic-direction"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/frontend-aesthetic-direction.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00092 | $0.00896 |
| Opus 5 | $0.00046 | $0.00448 |
| Sonnet 5 | $0.00018 | $0.00179 |
| Haiku 4.5 | $0.00009 | $0.00090 |
Grade A, and why
frontend-aesthetic-direction scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
前端视觉方向
在真正的绿地设计中先确定系统，再制作高保真界面。目标是给后续决策建立依据，避免边做边发明互相冲突的默认值。
1. 确认确实没有既有语境
检查品牌规范、现有产品、参考网站、代码库 token 和局部设计系统。任何可用来源都应优先复用；用户有材料但未提供时先索取。
2. 明确意图
确认期望感受的三个形容词、受众、行业、喜欢的参考及具体原因、禁用风格和素材限制。若用户无法决定，给出 3–4 个真正不同的方向，每个写明背景色、强调色、字体组合、密度和理由；至少一个方向应明显跳出常见答案。
3. 锁定系统
- 排版：明确标题、正文和必要的等宽字体、字重及字号阶梯，最多 1–2 个家族。常见字体可以使用，但必须有品牌、可读性、语言覆盖或技术理由。
- 颜色：选择暖、冷或中性色调，定义主色、至多一个强调色、语义色和中性色阶。无品牌时可用
oklch()构建协调色板。 - 密度：选择 4px、8px 或项目明确的间距基础，并确定紧凑、常规或宽松。
- 圆角与阴影：确定锐利、柔和或胶囊式，以及一套统一层级；不要混用多套阴影逻辑。
- 组件：明确主要与次要控件默认采用填充、描边、幽灵或抬升样式。
- 图像与图标：确定真实摄影、专业插画、正式图标集或诚实占位符；不要把临时装饰当最终资产。
- 动效：选择克制、表现型或活泼，并定义基本时长与缓动；同时考虑减少动态效果设置。
米白、展示衬线和陶土色的暖编辑风本身合法，但只有简报确实支持时才选；不能作为所有产品的默认视觉答案。
4. 记录并试做
把方向写入源文件顶部的简短注释或项目设计决策文档，包含每个轴的具体选择和 token。然后先制作一个小表面，例如 Hero、卡片或按钮组，验证它是否符合三个形容词；通过后再扩展。
后续所有页面引用已定义 token。需要新值时先扩展系统，再使用，不在页面中散落一次性色值。
示例
输入：“这是一个全新的开发者工具，没有品牌，先帮我定视觉方向。”
**输出：**给出三套差异明显的方向，经用户选择后记录字体、冷中性色板、紧凑 4px 密度、4px 圆角、边框式组件和克制动效，并制作一组 Hero 与按钮验证方向。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 49 lines · 92 tokens per session scan A e5d77e5f9aa3
frontend-aesthetic-direction is a skill published in the GitHub repository Onevium/awesome-claude-skills (1 stars, last pushed 15d ago), licensed MIT. It adds 92 tokens to every session and 896 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards…
apple-design
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading)…
web-design-expert
Web design and UX guidance for visual systems, accessibility, interaction patterns, and performance-aware interfaces. Use when designing a website's look and feel, improving UX/accessibility, or reviewing a UI for polish and performance.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter…
review-animations
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.