Results for “protein-design”

Turn a chosen design direction into a canonical DESIGN.md plus production tokens that don't look vibecoded — state-level colors (8-step neutral ramp, rest/hover/active/ disabled, focus ring), APCA-checked contrast, typography, spacing/radius/motion/elevation, an icon strategy, and component contracts for the core atoms. Emits tokens in the project's stack format (shadcn HSL vars or Tailwind v4 @theme). Load when the user asks to build a design system, generate design tokens, create a DESIGN.md, set up a theme, design a color or type system, pick icons, or when frontend-design routes here. Replaces design-tokens-craft and icon-craft. Sub-skill of frontend-design. Reads DIRECTION.md first.

Documents Nike's commerce design system: photography-first layouts, typographic hierarchy, color palette, and component patterns across PLP, PDP, and editorial pages.

Generates DESIGN.md files for Google Stitch that encode premium, anti-generic UI standards including typography, color, layout, motion, and anti-patterns.

Redesign a website page for presales by extracting its brand surface, identifying tensions, and generating three differentiated variants with motion validation.

Generates DESIGN.md files for Google Stitch that encode premium, anti-generic UI standards with strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

Write, read, and apply DESIGN.md files — Google Stitch's open AI-readable design-system format (YAML design tokens + Markdown rationale). Use when asked to "create a design.md", "extract a design system from [brand/PDF/site/screenshots]", "document this brand for AI tools", or when reverse-engineering a brand's visual identity into reusable tokens for an AI coding agent to apply consistently.

Takes a PRD, reference URL, screenshot, or keywords to produce a DESIGN.md specification, then generates production-ready web code that meets UI/UX, visual, motion, and responsive standards.

Select a consistent visual design system for PPT slides using radius/spacing style recipes, including Sharp, Soft, Rounded, and Pill variants with component mappings and typography rules.

Builds and governs design systems with a three-layer token architecture, component specs, and design-to-code handoff, including slide generation.

Nick's enterprise design system. Enforces his visual standards on every web project — typography, color, layout, spacing, components, and anti-patterns. Must be referenced before any build spec is written. Produces "Enterprise Confidence with Clean Authority" — never generic AI design.

Onboards brand tokens and generates a 12-token CSS palette for consistent, WCAG-AA-compliant HTML document styling across markdown conversions.

Generates a bespoke brand identity for a new project through a short interview, then writes it as a DESIGN.md file (Google Stitch format) in that project's own repo. Use when starting a new project and its visual identity isn't defined yet, when asked "what's the brand for X", "define the brand for this project", "new project design system", or before the first UI work on a fresh project. Do NOT use this to restyle or elevate a project that already has an identity — that's `taste-redesign`.

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

Design banners for social media, ads, website heroes, and print with multiple art direction options and AI-generated visuals.

Creates and manages design token systems with three-layer architecture, generates CSS variables, validates token usage, and produces brand-compliant slide presentations with Chart.js and contextual decision logic.

Analyzes and documents Superhuman's design language, including color palette, typography, layout, and elevation system for implementation.

System Design

Analyze and replicate xAI's design language: near-black canvas, white pill outlines, Universal Sans display type, and Geist Mono technical labels.