Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
Produce rich, self-contained, single-file HTML as the default output format instead of Markdown — for specs, plans, code reviews, PR write-ups, reports, explainers, design explorations, slide decks, SVG diagrams, and small interactive editors with copy-as-prompt/JSON export. USE WHEN the user asks to "make an HTML…
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…
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured…
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not…
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
Generate and lifecycle-manage HTML prototypes for UI exploration and OpenSpec changes. Use when creating, validating, completing, or archiving a UI prototype.
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
Build polished front-end UI together with a signature motion effect in a single self-contained HTML file, combining SVG.js / SVG filters and the Canvas 2D API. Use when the user asks to build a web page, landing page, dashboard, or component that has a special visual effect, animation, particle system, fluid/water…
A set of instructions for a TypeScript project, written partly in Chinese, with rules for coding, documentation diagrams, and visual design work. It includes a pre-flight checklist that must be answered before changing files.