Art & Design

Step 4 of website-design. Builds the page tree, navigation and URL scheme, defines for each page the question it answers and the order of its messages, and produces grey low-fidelity HTML wireframes with real draft copy for the key page types. Use when planning information architecture, sitemap, navigation, page structure or wireframes, before any visual design.

Use when requesting or giving feedback on wireframes, running or facilitating a design critique, or preparing wireframes for stakeholder review. Also fires when feedback arrives vague ('make it pop', 'I don't like it'), as solutions instead of problems ('just move it to settings'), when deciding which feedback to act on after a review, or when a review session went sideways — loud voices dominating, defensiveness, or the same debates repeating without decisions.

Reviews an existing website, page concept, mockup, or creative direction for whether it feels uniquely owned by the brand rather than generic, template-led, or AI-default. Use when the user asks whether a design stands out, feels memorable, attracts the right audience, repels the wrong audience, expresses a specific brand personality, or belongs unmistakably to one business.

Design, validate and ship color palettes for websites and UI. Builds role-based palettes (bg, surface, text, primary, accent, semantic) in OKLCH from a brief (brand color, mood, industry, light/dark), checks every pair against WCAG 2.2, adds APCA and color-blind checks, and outputs copy-ready CSS custom properties, Tailwind v4 @theme or DTCG tokens. Includes 15 verified palettes (wellness/organic, dark developer, SaaS, fintech, health, e-commerce, agency) and a live demo page. Use this whenever the user mentions color palette, color scheme, brand colors, color combination, which colors go together, dark mode colors, theme, design tokens, contrast, accessible colors, CTA color, "make it look less generic", or asks for a palette for a landing page, Shopify/WordPress theme, dashboard or portfolio, even if they never say "palette". Also use to audit or fix colors in an existing design or CSS.

Scans the frontend of a web app or website and removes typical vibecoding artifacts (overused AI fonts like Inter and JetBrains Mono, emoji, AI-looking copy with em dashes and quotes, glass on large surfaces, default fade-in animations, tinted icon boxes, accent-bar callouts, browser-default controls) and fixes basic UX problems in dialogs, tooltips, focus, scroll and images. Use when the user asks to clean up, polish, de-AI, fix the UI/UX, or make an AI-built frontend look designed, or runs /design-differently.

Transforms website content into expressive editorial layouts through typographic hierarchy, composition, grid systems, image sequencing, pacing, density changes, and intentional visual interruptions. Use when the user asks for an editorial, magazine-like, typography-led, art-directed, content-rich, unconventional, or less component-driven website; when a page feels repetitive or generic; or when static content needs a distinctive digital reading experience.

Standalone UI/UX, motion direction, and visual parity workflow for designer. Use for frontend design, design systems, responsive layouts, reference replication, motion/reduced-motion review, accessibility review, visual polish, asset planning, and browser-validated UI quality.

Guides a complete beginner from "I need a website" to a custom-designed, live WordPress site built with real Elementor elements they can edit themselves. Interviews them, designs the site, makes the photos, walks them through hosting, connects Claude to Elementor, builds every page, and publishes. Use when someone wants to build, design, or finish a WordPress or Elementor website, or says "build my website", "continue my website", or "/wordpress-website".

One sentence - what this skill does and when to invoke it

Help beginners and designers plan, build, or improve a personal UI/UX portfolio website using reusable page sections, project case-study patterns, and named motion recipes. Use when creating a portfolio site or translating a portfolio brief into pages and components.

Route design-related HTML artifact tasks (landing pages, portfolios, prototypes, decks, content pages, web tools, social cards, info-interactive) to the right artifact skill, and decide whether to use design-system-reference, design-system-generation, or export. Use for any UI/visual/HTML design work.

Generates distinct story-led website concepts from a defined business problem, audience transformation, brand material, content evidence, and optional graphic-universe research. Use when a website or landing page needs a central creative idea, narrative structure, message progression, tone, and design implications before visual direction, wireframing, copywriting, or implementation begins.

Design, build, redesign, debug, and optimize professional responsive websites in VS Code. Use for HTML/CSS/JavaScript websites, React and Tailwind projects, UI/UX improvements, animations, screenshot-inspired layouts, asset integration, accessibility, and frontend testing.

Walk the user through designing a website concept before any code — purpose, audience, content inventory, tone, visual archetype, structure — and output 2-3 distinct concept directions plus an ASCII homepage wireframe. Use when planning a new personal site, portfolio, or marketing page upstream of implementation. Hands off to ui-ux-architect / frontend-design.

Writes or rewrites conversion copy for service-business homepages, landing, service, about and contact pages, delivering a wireframe, section copy annotated with rule IDs, headline and CTA alternatives, and an open-gaps list. Use for "write my homepage", "rewrite this hero", "landing page copy for my ads". For reviewing an existing page, use website-conversion-audit.

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 always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

Plan, design, build, or update a distinctive product marketing website from its approved product definition, with a separate design brief, responsive UI, discoverability, and verifiable behavior. Use for a public product website or a Lovable handoff, rather than private application screens.

Design, implement, refine, or visually review concrete web pages and components: landing pages, portfolios, ecommerce, editorial sites, product UI, charts, typography, responsive layout, visual polish, and purposeful motion. When design-ui-excellence is also available, prefer this skill for rendered web work; prefer that skill for strategy, messaging/SEO/content architecture, campaigns, brand/design systems, and cross-screen UX planning. Honor explicit skill selection. Not for backend-only work, native game UI, or indiscriminate visual restyling.

Step 6 of website-design. Creates three deliberately different visual directions as style tiles or element collages (colours, type, buttons, a hero fragment, a card, imagery, with real copy but no full page layout), spread along named axes, lets the person rate them against the brand attributes and merges the result into one direction. Use when a website needs visual design options, look and feel variants or a style direction.

Use when deciding whether to wireframe or jump straight to high-fidelity design or code, choosing the right fidelity for a design artifact, or picking a wireframing tool or method. Also fires when stakeholders skip ideation and commit to the first concept, demand 'just make it look real,' polish visuals during early exploration, sign off on branding instead of structure, or when a project derails after coding starts because flaws weren't caught on paper.

Interviews a person and builds them a complete, award-style personal portfolio site in one design (WebGL particle galaxy, cut-out portrait with an ASCII "token view" lens, animated name, custom cursor, chat mascot, physics ball pit of their tools, live GitHub archive), then previews it, runs browser QA and deploys it once they approve. Use when someone asks for a portfolio, personal website, developer homepage or "a site like grimnej.com".

Transforms any GitHub repository URL or README into a production-grade, bilingual (Traditional Chinese & English), aesthetic single-file HTML landing page using Tailwind CSS CDN.

Create mid-fi wireframes as a self-contained HTML/CSS file from a screen or flow described in words. Use this skill for requests like "make a wireframe of...", "sketch the structure of...", "show me what X would look like", "wireframe for...", "make a lo-fi or mid-fi design of...", or whenever someone describes a screen or flow and wants to see it. Also triggers on "screen layout", "page layout", "interface sketch", "UI sketch", "concept site" or wireframes for several parts of a product, in any language. Use it proactively too when a user describes a UX problem and visual structure would help clarify the solution.

Gives every UI a genuinely different look instead of the same default style. Rolls a distinct design direction (fonts, palette, shape language, layout archetype, motion) from a library of 22 aesthetic worlds, avoids what the project used recently, and builds it in React + Tailwind. Use this whenever the user asks to design, build, redesign, restyle or theme any interface (landing pages, marketing sites, SaaS apps, dashboards, admin panels, e-commerce stores, product pages, mobile app screens, portfolios), and especially when they say their sites all look the same, generic, templated, AI-made, or ask for variety, options, themes, a fresh look, different fonts or a new vibe. Use it even when they don't mention style at all but are starting a new UI from scratch.