菜单
Unified design hub — routes to the right sub-skill for any visual/UI/UX task. Covers: component sourcing, aesthetics, composition, patterns, mobile, photos, canvas art, shadcn. Load this when doing any design work.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Behavioral testing methodology — test what users experience, not how code is structured. Use when writing tests, reviewing test quality, planning test strategy for new features, or when existing tests are brittle/verbose/coupled to implementation details. Triggers: writing tests, TDD, test review, "tests keep breaking", "too many mocks", "tests are verbose", test coverage planning, behavior-driven development.
Summon 8–12 fictional but statistically plausible people from Kyrgyzstan to judge your web app. They take screenshots, click around, get confused, get delighted, and write honest reviews in Russian. Output: a single .md report with embedded screenshots. Use when you need brutal UX feedback from people who ride marshrutkas.
Artemy Lebedev-style бизнес-линч design review. Opens the site in a real browser, screenshots everything, then tears it apart (or praises it) in his signature voice — brutal, specific, visual. Use when you want a no-bullshit design review, 'линч', 'lebedev review', 'artemy review', or 'roast my site'.
Autonomous experiment loop — modify code, measure, keep/discard, repeat forever. Based on Karpathy's autoresearch pattern. Use when there's working code + a measurable metric to optimize. Agent works while you sleep.
Iterative deep research agent — recursive breadth×depth tree search that accumulates learnings, generates follow-ups, and produces cited reports. Uses exa + serper + subagents. Use when user says 'deep research', 'investigate', 'deep dive', 'thorough analysis', or needs multi-source synthesis with depth.
Detect and fix design system leaks — default shadcn/bootstrap/MUI styling breaking through your brand. Use when: UI feels 'template-y', 'looks like shadcn', 'too generic', buttons are inconsistent colors, cards look default, or after shipping many features fast. Also: 'audit my design', 'check consistency', 'brand leak', 'fix the defaults'.
| name | design |
| description | Unified design hub — routes to the right sub-skill for any visual/UI/UX task. Covers: component sourcing, aesthetics, composition, patterns, mobile, photos, canvas art, shadcn. Load this when doing any design work. |
One skill to load for any visual work. Routes to specialized sub-skills by task type.
| You're doing... | Load this skill | Path |
|---|---|---|
| Sourcing components (21st.dev, Magic UI, Aceternity) | component-craft | ~/.pi/agent/skills/component-craft/SKILL.md |
| Creative aesthetics (distinctive look, avoid AI slop) | frontend-design | ~/.pi/agent/skills/frontend-design/SKILL.md |
| Composition & theory (hierarchy, color, spacing, Gestalt) | ui-design | ~/.pi/agent/skills/ui-design/SKILL.md |
| Pattern research (what do real apps do?) | ui-patterns | ~/.pi/agent/skills/ui-patterns/SKILL.md |
| Mobile web (viewport, touch, fluid type, safe areas) | mobile-first | ~/.pi/agent/skills/mobile-first/SKILL.md |
| Stock photos (search + verify, zero broken images) | unsplash | ~/.pi/agent/skills/unsplash/SKILL.md |
| shadcn/ui (accessible primitives, MCP server) | shadcn-ui | ~/.pi/agent/skills/shadcn-ui/SKILL.md |
| Static art (posters, PDF, PNG, visual philosophy) | canvas-design | ~/.pi/agent/skills/canvas-design/SKILL.md |
| Photo search (multi-source: Serper, Unsplash, Pexels) | photo-finder | ~/.pi/agent/skills/photo-finder/SKILL.md |
| Pixel editing (erase text/watermarks from existing images, fix logos) | image-edit | ~/.pi/agent/skills/image-edit/SKILL.md |
| Лебедев review (бизнес-линч, brutal design critique with screenshots) | artemy | ~/.pi/agent/skills/artemy/SKILL.md |
| Design audit (find where defaults leak through your brand) | design-audit | ~/.pi/agent/skills/design-audit/SKILL.md |
1. ui-patterns → Research: what do the best apps do for this type of page?
2. ui-design → Plan: composition, hierarchy, color palette, typography
3. component-craft → Source: grab premium components from 21st.dev / Magic UI
4. shadcn-ui → Foundation: accessible primitives (dialog, tabs, forms)
5. unsplash → Photos: search + verify stock images for visual sections
6. frontend-design → Execute: apply distinctive aesthetics, no generic AI look
7. mobile-first → Audit: touch targets, fluid type, viewport, safe areas
1. ui-design → Diagnose: what's wrong (hierarchy? spacing? color?)
2. ui-patterns → Compare: what do competitors/best-in-class do?
3. component-craft → Upgrade: replace plain cards with image-overlay, glass, etc.
4. frontend-design → Polish: distinctive touches (motion, typography, texture)
5. mobile-first → Verify: does it work on 390px? Touch targets? Fluid type?
1. photo-finder → Search Unsplash/Pexels/Serper, verify every URL loads
1. canvas-design → Full pipeline: philosophy → canvas → refinement
1. image-edit → Inspect background type, scan coordinates, erase with alpha
2. browser-testing → Verify result in actual browser (cache gotcha!)
3. canvas-design → If 2 attempts fail — recreate the asset cleanly
1. artemy → Бизнес-линч: screenshots + Lebedev-style critique in Russian
1. design-audit → Find 7 common leak patterns (black buttons, mixed accents, etc.)
2. visual-qa-loop → Batch fix all findings
These are the core rules baked across all sub-skills. Internalize them.
ui-design)frontend-design)mobile-first)100dvh not 100vhclamp() for fluid type: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)touch-action: manipulation (kills 300ms delay)component-craft)from-black/70 via-black/30 to-transparentgroup-hover:scale-105 transition-transform duration-700bg-white/5 backdrop-blur-xl border border-white/10loading="lazy" on images below fold<img> (not Next.js <Image>) for external URLsunsplash)?w=800&q=80&auto=format (controlled size, auto WebP)src.large2x for cardsProject type → Library choice:
SaaS dashboard → shadcn/ui + Tailwind (sober, functional)
Marketing/landing → Aceternity UI + Magic UI (animated, impressive)
Travel/content site → component-craft patterns + unsplash (photo-rich)
Design system → shadcn/ui as base, customize everything
Creative portfolio → frontend-design skill (push boundaries)
Mobile-first app → shadcn/ui + mobile-first skill (practical)
From ui-design + mobile-first combined:
clamp(), no fixed px<img> for externaloverscroll-behavior: contain on scroll containersprefers-reduced-motion respected| Area | Primary Skill | Also In | Status |
|---|---|---|---|
| Color theory | ui-design | frontend-design (briefly) | ✅ No conflict — ui-design = theory, frontend-design = application |
| Typography | ui-design (scale, pairing) | mobile-first (fluid clamp) | ✅ Complementary |
| Component sourcing | component-craft | shadcn-ui | ✅ component-craft = premium/animated, shadcn = foundation |
| Photo search | photo-finder | — | ✅ Merged (was unsplash + photo-finder) |
| Patterns | ui-patterns | component-craft | ✅ ui-patterns = research/exploration, component-craft = implementation |
| Accessibility | shadcn-ui | ui-design (contrast checks) | ✅ shadcn = baked-in a11y, ui-design = checklist |
| Mobile | mobile-first | ui-design (responsive checklist) | ✅ mobile-first = deep technical, ui-design = high-level |
| Aesthetics | frontend-design | canvas-design | ✅ frontend-design = web code, canvas-design = static art |