菜单
This skill should be used when the user asks to "make this distinctive", "avoid generic design", "create memorable UI", "bold aesthetic", or when designs feel generic, need to stand out, or require philosophy-driven creative direction.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | distinctive-design |
| description | This skill should be used when the user asks to "make this distinctive", "avoid generic design", "create memorable UI", "bold aesthetic", or when designs feel generic, need to stand out, or require philosophy-driven creative direction. |
| version | 2.0.0 |
This skill guides creation of distinctive frontend interfaces that avoid generic "AI slop" aesthetics. The key is intentionality over intensity - bold commitment to a clear vision.
Stop and answer these before writing any CSS:
What makes this UNFORGETTABLE? What's the one thing someone will remember about this page? If you can't answer this, you're not ready to code.
What's the extreme? Pick a direction and commit: brutally minimal, maximalist chaos, editorial/magazine, brutalist/raw, art deco/geometric, organic/natural, luxury/refined, industrial/utilitarian. Half-measures produce forgettable work.
What's the conceptual metaphor? "Aged canvas meets analytical precision." "A gallery exhibition." "Engineering blueprints." "A newspaper front page." The metaphor guides every decision.
Generic AI output converges on the same choices:
The problem isn't these elements - it's choosing them by default instead of intentionally.
Distinctive work diverges:
Choose fonts that are interesting, not safe. Pair a distinctive display font with a refined body font. The font should feel like it belongs to this specific project, not "a website."
Asymmetry creates energy. Overlap creates depth. Negative space creates focus. The eye should have a journey, not a checklist. Break the grid when it serves the concept.
One orchestrated moment beats ten scattered hover effects. Staggered reveals on page load. Scroll-triggered surprises. Motion should guide attention, not decorate.
Commit to a palette, then use it with confidence. Dominant colors with sharp accents. If every color is equal, nothing stands out. The palette should feel inevitable for this concept.
Texture, grain, layered transparencies - these create atmosphere. The difference between "a website" and "this website" is often in details that reinforce the concept.
When you look at your work, ask:
If working on Applied AI's site, the established concept is "Analytical Warmth":
But don't just apply these mechanically. Ask: Does this section reinforce or dilute the concept?
Distinctive design comes from bold commitment, not safe accumulation of "good practices." Claude is capable of extraordinary creative work. Don't hold back.
This skill should be used when the user asks to "housekeep", "sweep stray transition dirs", "clean up agent-infra debris", "find misplaced .workspace or .claude dirs", or when auditing project trees for the class of debris caused by hooks writing to the wrong project root (nested repos, worker-pool worktrees, stub-only session files, doubled path prefixes). Do NOT use for general project cleanup (see `/system:cleanup`) or for memory garbage collection (see `/memory-gc`).
Write clear, impactful website content for scanners. Use when writing landing pages, service descriptions, CTAs, or above-the-fold content. Covers the 50% test, sentence surgery, power words, page-type guidelines, mobile-first brevity, and techniques for reducing wordiness while maintaining impact.
Match content to what users actually want when they search. Use when creating website pages, blog posts, or any content for search engines. Covers 4 intent types (informational, navigational, transactional, commercial investigation), SERP analysis, query modifiers, and buyer journey mapping.
Technical SEO writing techniques for web content. Use when writing website pages, landing pages, service descriptions, or blog posts for organic search traffic. Covers keyword placement, meta descriptions, heading hierarchy, E-E-A-T principles, internal linking, long-tail keywords, schema markup, and measuring SEO success.
Complete D2 language reference for creating diagrams. Covers shapes, connections, containers, special types (SQL tables, sequences), icons, styling, and advanced features. Use for all D2 diagram generation tasks.
Clarity and simplicity principles for effective diagrams. Focus on essential elements, minimize visual noise, maintain consistency, and use single abstraction levels. Ensures diagrams communicate clearly without clutter.
