Frontend Design Resources for Coding Agents

A portable skill that installs "good taste" into any AI coding agent so its generated frontend stops looking like generic slop. Once loaded, layout, typography, motion, and whitespace all improve noticeably and the output reads as intentional rather than templated. Because it's agent-agnostic, it transfers cleanly from Claude Code to OpenCode, making it the closest single addition to matching Cowork-level design output.

A portable Claude Skill adapted directly from Claude.ai's internal design system that turns any agent into an expert designer for self-contained HTML artifacts — decks, landing pages, prototypes, animations, and posters. It captures the same opinionated design defaults that make Cowork output look polished, and packages them so you can run them outside claude.ai. For your OpenCode goal, this is the most faithful recreation of the design engine you already like.

A local agent skill that reproduces the Claude Design experience without needing claude.ai/design, producing polished UI mockups, prototypes, decks, and wireframes as self-contained HTML. It's built to slot into whatever agent you use, so it fits a local-first OpenCode workflow. Think of it as a plug-in design department that outputs ready-to-open HTML files.

An open-source design skill where you drop in a brand link, name, or screenshots and every UI the agent ships afterwards matches that brand's colors, type, and feel. It removes the usual drift where each generated page looks slightly different, which is exactly the consistency problem that separates hobby output from production work. Useful when you want client sites to stay on-brand without re-prompting.

A skill that produces rich, visual plans for coding agents so the model commits to a design direction before it starts writing markup, rather than defaulting to a safe generic layout. Planning quality is an underrated driver of final UI quality, and this front-loads that decision. The walkthrough video links the source repo so you can install it into your own agent setup.

A format specification from Google Labs for describing a visual identity to coding agents in a single structured file, giving the agent a persistent understanding of colors, typography, spacing, and component rules. Instead of re-explaining your design language in every prompt, you commit one DESIGN.md to the project root and the agent references it on every build. It's the foundation the rest of this category is built on.

A free, MIT-licensed collection of DESIGN.md files reverse-engineered from 31 billion-dollar websites (Apple, Spotify, Airbnb and more), each capturing the site's real color, font, spacing, and layout patterns in a format agents can read and reproduce. You pick a system, drop its file into your project root, and tell the agent to use it — no Figma exports or screenshots needed. It's the fastest way to give a bare project a credible, high-end look.

A Figma plugin that scans an entire file and extracts every design token — colors, type styles, spacing, components — into a structured DESIGN.md that AI coding tools and developers can read directly. It bridges the gap between a designed source of truth in Figma and the context file your agent needs, so agent output stays faithful to the real design. Handy when a client already has a Figma system you want the agent to honor.

A tool that takes any live website URL and produces a semantic DESIGN.md describing not just raw values but the relationships behind them — color relationships, typography logic, spacing rhythm, and component patterns. That semantic framing helps the agent generalize a look rather than blindly copying pixels, which produces more coherent results on new pages. Good for capturing the feel of a reference site you admire.

An open-source, local-first alternative to Claude Design that generates decks, landing pages, dashboards, and full brand systems, and works with Claude Code, Codex, and Cursor. It's positioned as the tool to reach for when you want the Claude Design workflow but self-hosted and model-flexible. For a local OpenCode pipeline, it's one of the most direct drop-in replacements.

An open-source AI design tool that goes from a prompt to interactive prototypes, slide decks, PDFs, and marketing assets, with multi-model support (Anthropic, OpenAI, Gemini, DeepSeek, Ollama), bring-your-own-key, and a local-first architecture. The flexibility means you're not locked to one provider and can run it against a local model when needed. It fits the same self-hosted philosophy as OpenCode.

An AI design platform paired with a big, browsable library of style prompts and design systems spanning looks like brutalist, editorial, and SaaS-landing aesthetics, each with a use-prompt you can lift directly. Even outside the app itself, that prompt library is a fast way to hand your agent a committed visual direction. It's a strong source of "style presets" to combine with a taste skill and a DESIGN.md.

An open-source, AI-first design tool that lets you visually build, style, and edit a live React app with AI assistance, closing the loop between designing and shipping actual code. Rather than generating throwaway mockups, it operates on your real components, so design changes land directly in the codebase. Useful when a project has graduated from HTML artifacts into a maintained React frontend.

A curated, community-maintained list of AI tools focused specifically on producing beautiful UI/UX, saving you the work of discovering what's current in a fast-moving space. It's the map to keep next to this document as new skills and tools appear. Scan it periodically to find additions worth folding into your OpenCode setup.

A free, open-source Tailwind CSS component library built for fast development with zero configuration, installation, or setup overhead. Well-structured component libraries give an agent reliable, high-quality primitives to assemble instead of inventing markup from scratch, which raises baseline output quality. Point OpenCode at these components as the vocabulary for a build.

A template for pixel-perfect website reverse-engineering, letting an agent study and reconstruct the structure and styling of a reference site with high fidelity. It's the practical scaffold behind the "cloned an award-winning site in minutes" workflows, giving you a repeatable starting point rather than ad-hoc prompting. Use it to lift a layout you like, then adapt it to your own content and brand.

A single tweet-collected directory of the best galleries for design inspiration — curated.design for web design, landing.love for landing pages, saaspo for SaaS sites, navbar.gallery and cta.gallery for sections, appmotion.design for animation, and component.gallery for design systems. These are where you source concrete reference material before a build so you can point the agent at a specific, real example. Bookmark it as your go-to inspiration hub.

A large reference library of real UI/UX animations from apps like Spotify, CRED, and Duolingo, showing how motion actually behaves in polished products. Since AI-generated sites tend to default to a single scroll-reveal, a concrete motion reference helps you specify better interactions and lift a site from static to dynamic. Pair it with the GSAP skill to translate a reference into real animation.

A walkthrough of design skills that fix where AI-built sites fall apart — namely animation, where models default to the same tired scroll-reveal — by using a dedicated GSAP skill plus drop-in "taste preset" skills that push the model toward one committed look. It explains why animation and a strong point of view matter most on landing pages and portfolios where design is the product. A good conceptual primer before you install the skills above.

A tutorial demonstrating how to stop relying on lucky prompts and instead drive landing-page generation from a DESIGN.md file, so the output is consistent and predictable rather than a new gamble each time. It makes the abstract spec concrete by showing the full build flow. Watch it to see how the DESIGN.md pieces in section 02 come together in practice.

A conversation-style breakdown of why coding agents are strong at logic but weak at design — breaking color palettes, ignoring spacing, forgetting component rules — and how DESIGN.md acts as a persistent design brain that keeps them consistent. It gives the strategic case for adopting the format across your projects. Useful context to justify making DESIGN.md a standard step in your workflow.

A practical demo of reconstructing an award-winning website in about fifteen minutes using an AI design-engineer workflow, showing how to study a reference and rebuild its quality quickly. It's the applied companion to the website-cloner template, turning the idea into a concrete process. Watch it to internalize the reference → rebuild → adapt loop.

A workflow guide for using AI to analyze a codebase and generate a "living design system" contained in a single HTML file, which then acts as a portable reference the agent consults to keep new UI consistent. It's a lightweight, self-contained way to enforce coherence without a heavy design-tooling setup — the same single-file, no-build philosophy this page is built on. Good for keeping a project visually consistent as it grows.