How to Make Beautiful
Pages with OpenCode
Does your OpenCode-generated page look like it is from 2010? The problem is not the AI—it is the lack of design references. This guide shows you how to use Design Extractor to pull color, typography, and layout specs from any website, then feed them to OpenCode for a professional-grade rebuild.
Default Aesthetics Are Boring
Without a design skill, OpenCode defaults to "safe" fonts and centered symmetrical layouts—every page looks the same.
No Design Reference
AI cannot create great design if it has never seen great design. You need to give it a "design spec sheet" first.
Manual CSS Tweaks Are Slow
Fixing colors, spacing, and fonts after generation? Inefficient. The key is getting it right the first time.
Problem Diagnosis
Why Your OpenCode Pages Do Not Look Good Enough
AI Defaults to "Safe" Design
Without a reference, OpenCode picks the least risky but most boring option: light gray background, blue primary, Inter font, standard card layout. This is an AI "conservative strategy," not a design choice.
No Visual Hierarchy Training
Base models lack specialized frontend visual-design training. They know CSS properties but not when to use generous whitespace, strong contrast, or grid-breaking elements.
Prompts Lack Design Detail
"Make a nice landing page" means almost nothing to AI. "Nice" needs to be quantified: exact color values, type scale ratios, spacing tokens, corner radii.
frontend-design Skill Not Installed
OpenCode supports Skills that change AI behavior. The frontend-design skill specifically teaches AI to avoid common fonts, use distinctive palettes, create asymmetric layouts, and add micro-interactions—the real game changer.
Methodology
Core Idea: Give AI a "Design Gene"
We are not teaching OpenCode to write code; we first let it "see" great design, then recreate it. Design Extractor + frontend-design skill is like giving AI a design director.
Extract Real Design Specs
Use Design Extractor to analyze any website and automatically pull colors, fonts, spacing, and component styles into a structured DESIGN.md.
Turn Specs into AI Commands
Design tokens in DESIGN.md (colors, type sizes, spacing) become precise constraints in your prompt, ensuring the AI follows them exactly.
Install frontend-design Skill
Equip OpenCode with a design skill pack so it fundamentally changes its design decision logic, not just executes code.
Plan Mode First
OpenCode's Plan mode lets the AI output a design plan before coding, avoiding the chaos of write-and-fix-as-you-go.
Iterate Freely
Use /undo and /redo to roll back quickly, and run multiple sessions in parallel to compare different design directions.
Workflow
3 Steps to Recreate Any Website Design in OpenCode
STEP 01
Extract Design Specs (Design Extractor)
Open the website you want to recreate in Chrome and click the Design Extractor extension icon. Within 30 seconds it extracts the color palette, font stack, spacing system, and component styles, generating a complete DESIGN.md document.
STEP 02
Install frontend-design Skill
Run opencode in your project directory and install the frontend-design skill. This teaches OpenCode to use distinctive fonts, create asymmetric layouts, and avoid the default "purple gradient + rounded card" cliché.
STEP 03
Execute in OpenCode
Enter Plan mode, paste the DESIGN.md contents as design constraints, then issue the build command. OpenCode strictly follows the extracted specs, jumping from "template feel" to "custom feel."
Prompt Templates
Production Prompts: Copy & Paste
These prompts are optimized for the OpenCode + Design Extractor workflow and include design constraints, tech stack declarations, and output requirements.
SaaS Landing Page
Best for recreating modern SaaS product sites like Stripe, Notion, or Linear
//frontend-design
Based on the following DESIGN.md design specs, create a SaaS product landing page:
【Design Specs】
(Paste your Design Extractor-generated DESIGN.md here)
【Page Requirements】
- Tech stack: React + Tailwind CSS + shadcn/ui
- Include: navbar, hero (headline + sub + CTA), 3 feature cards, pricing section, footer
- Strictly follow DESIGN.md colors, fonts, and spacing
- Add hover micro-interactions and transition animations
- Ensure mobile responsiveness
【Output Requirements】
- Enter Plan mode first to confirm the design
- Generate a complete, runnable single-file component
- Comment each design decision referencing DESIGN.md sectionsE-commerce Product Page
Best for recreating high-end e-commerce product detail pages
//frontend-design
Based on the following DESIGN.md design specs, create an e-commerce product detail page:
【Design Specs】
(Paste your Design Extractor-generated DESIGN.md here)
【Page Requirements】
- Tech stack: React + Tailwind CSS
- Include: product image gallery, title & price, color/size selector, add-to-cart button, description tabs, related products
- Strictly follow DESIGN.md colors and typography
- Apply design-spec corner radii and shadows to images
- Add micro-animations to buttons and interactive elements
【Output Requirements】
- Plan layout structure before coding
- Ensure accessibility (ARIA labels)
- Clean code structure for easy real-data integrationPersonal Portfolio
Best for designers and developers to showcase projects
//frontend-design
Based on the following DESIGN.md design specs, create a personal portfolio website:
【Design Specs】
(Paste your Design Extractor-generated DESIGN.md here)
【Page Requirements】
- Tech stack: HTML + CSS (or React + Tailwind)
- Include: avatar & bio, skill tag cloud, 3-4 project cards (thumbnail + title + desc), contact
- Strictly follow DESIGN.md visual style (dark/light, font pairing, spacing rhythm)
- Add hover zoom and shadow effects to project cards
- Overall style should feel personal, not like a generic template
【Output Requirements】
- Single-file implementation, previewable in browser
- Leave placeholder data for easy replacementCase Studies
Real Website Recreation Demos
These cases show the complete process and results of recreating famous website designs with Design Extractor + OpenCode
Stripe-Style Landing Page
Extracted Stripe's dark gradient backgrounds, bold typography, and grid layout system. With the frontend-design skill, OpenCode successfully recreated its signature purple glow and precise type hierarchy.
Notion-Style Docs Site
Extracted Notion's minimal white theme, split-column layout, and soft shadow system. The generated page preserved its signature "clean but warm" visual feel instead of cold default black-on-white.
Linear-Style Dashboard
Extracted Linear's dark glassmorphism style, precise spacing tokens, and icon design language. OpenCode recreated its translucent panels, subtle borders, and indigo accent color with premium quality.
Pro Tips
5 Techniques to Elevate Your Designs
Master these tips to push your OpenCode-generated pages from "decent" to "stunning"
Use Plan Mode for Layout Planning
For complex pages, switch to Plan mode with Tab first. Let OpenCode output a complete layout plan and design rationale. Confirm before switching back to Build mode to avoid repeated rewrites.
Combine Multiple Skills
frontend-design + react-expert is a golden combo. The former handles aesthetic decisions; the latter ensures code quality. Swap react-expert for python-clean-code when doing Python projects.
Use Screenshots for Design Communication
Drag a screenshot of the reference site directly into the OpenCode terminal so the AI can "see" what you want. Pair it with DESIGN.md's quantitative parameters for doubled communication efficiency.
Tweak Tokens in DESIGN.md
Extracted specs are not gospel. Manually adjust certain tokens (e.g., changing primary color from indigo to emerald) to create variant designs without breaking the overall system.
Run Multiple Sessions in Parallel
Open multiple OpenCode sessions and let each try a different design direction (e.g., one dark, one light). Use /sessions to switch and compare, quickly finding the best approach.
Leverage /undo to Experiment Boldly
OpenCode's undo feature lets you ask the AI to try radical designs without fear. Doesn't work? /undo. Works great? Keep iterating. Design exploration costs approach zero.
FAQ
Frequently Asked Questions
OpenCode itself is open-source and free. You only pay for the AI model APIs you use. OpenCode supports 75+ model providers, including free local models.
You can get it from the Anthropic official skills repository (github.com/anthropics/skills) or visit skills.sh to find more community skills. Install it with a single command inside OpenCode.
Design Extractor supports most publicly accessible websites. As long as the page does not have strong anti-scraping mechanisms, it can extract color, font, spacing, and other visual specs. Some dynamically rendered content may require waiting for the page to fully load before analysis.
Yes. OpenCode generates standard frontend code (HTML/CSS/JS or React/Vue). Save it as a file and open it in a browser, or deploy to Vercel, Netlify, or any static host.
All three support skills to boost design capabilities. OpenCode's strength is being fully open-source with an active community skill ecosystem. Cursor excels at IDE integration. Claude Code has stronger base-model design ability. With Design Extractor, all three can produce professional-grade designs.
No. Design Extractor auto-generates a complete DESIGN.md. Just copy and paste it into your OpenCode prompt. You can also manually tweak certain tokens to customize the design.
OpenCode does not lock you to a framework. You can ask it to generate React, Vue, Svelte, Angular, plain HTML/CSS, or any other frontend stack. The frontend-design skill mainly influences design decisions, not framework choice.
Absolutely. That is the core value of this method—you do not need to know design, only how to "extract great design" and "tell AI to execute it." Design Extractor quantifies great design into parameters; OpenCode turns parameters back into code.
Start Your First Design Recreation
Install the Design Extractor Chrome extension, pick a website you love, get the full design spec in 30 seconds, and let OpenCode recreate it for you.