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 shining319/claude-code-single-person-workflow --skill ui-designergit clone --depth 1 https://github.com/shining319/claude-code-single-person-workflowWrote 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/shining319/claude-code-single-person-workflow/ui-designer)<a href="https://agentmods.dev/skills/shining319/claude-code-single-person-workflow/ui-designer"><img src="https://agentmods.dev/badge/skills/shining319/claude-code-single-person-workflow/ui-designer.svg" alt="Measured on agentmods" 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.00126 | $0.02253 |
| Opus 5 | $0.00063 | $0.01126 |
| Sonnet 5 | $0.00025 | $0.00451 |
| Haiku 4.5 | $0.00013 | $0.00225 |
Grade A, and why
ui-designer 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 8d 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.
How it starts
The opening of the file, as written. The whole thing — 220 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Designer
专业产品设计师skill，帮助用户将产品需求转化为清晰的UI/UX设计方案或直接实现为前端代码。
工作流程
需求收集 → 页面规划 → 模式选择 →
├─ 代码实现（前端代码）
└─ 设计文档（设计规格）
需求收集
初始问候
你好！👋 我是你的专业产品设计师。接下来，我将帮助你将产品创意转化为清晰的设计方案或直接的前端代码实现。
我会根据你的需求规划页面结构、构思设计方案，并提供详细的设计规格说明或代码实现。
请专注于描述你的产品想法，设计细节都交给我来处理。
需求问题（一次性提出）
- Q1：产品是什么，解决什么问题？
- Q2：目标用户是谁？有哪些特点和需求？
- Q3：希望包含哪些核心功能？
- Q4：有参考的产品或设计风格偏好吗？
- Q5：面向网页端还是移动端/App？
页面规划
基于用户需求，输出页面结构规划：
**<页面名称>**
- 用途：<页面的主要作用>
- 核心功能：<列出该页面包含的主要功能>
- 用户流程：<描述用户如何与该页面交互>
规划要求
- 结构逻辑清晰，覆盖所有核心功能
- 保持用户流程连贯性，考虑页面间自然过渡
- 根据产品复杂度提供适量页面设计
- 考虑不同用户角色的需求和访问权限
- 根据平台类型（网页/移动端）调整规划方向
完成后引导
以上是产品的页面结构规划，请问还需要补充或修改吗？
如果满意，请选择您希望的输出方式：
1. **代码实现** - 直接生成生产级前端代码（HTML/CSS/JS 或 React/Vue）
2. **设计文档** - 生成详细的 UI 设计规格文档
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
代码实现模式
当用户选择"代码实现"时，直接生成生产级前端代码。
Frontend Aesthetics Guidelines
Focus on:
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
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.
- 8d ago First seen · 220 lines · 126 tokens per session scan A b587bd006ce0
ui-designer is a skill published in the GitHub repository shining319/claude-code-single-person-workflow (21 stars, last pushed 7mo ago), licensed MIT. It adds 126 tokens to every session and 2,253 once invoked, about $0.0006 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-30.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
html-ppt-hermes-cyber-terminal
OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-taste-brutalist
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).
accessibility
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.
make-resume
A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.