메뉴
Create distinctive, marketplace-quality Shopify themes with strong brand cohesion. Design-first approach using Theme DNA to ensure every template reinforces the same vibe. Use when building full Shopify themes from scratch.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | shopify-theme-design |
| description | Create distinctive, marketplace-quality Shopify themes with strong brand cohesion. Design-first approach using Theme DNA to ensure every template reinforces the same vibe. Use when building full Shopify themes from scratch. |
Build Shopify themes that convert AND captivate. This skill combines conversion-focused structure with distinctive visual design to create themes that stand out in a sea of Dawn clones. The goal: marketplace-quality themes you'd be proud to sell.
Priority Stack:
The Anti-Slop Mandate: Every Shopify theme should be unmistakable. Actively avoid:
BEFORE writing any code, you MUST run the Vibe Discovery process. This generates a UNIQUE aesthetic direction every time.
The goal: No two themes should look alike, even for similar stores.
Before diving into the questions, ask:
"Do you have an existing logo or brand colors you'd like me to work from? If so, share the logo image and I'll extract a color palette from it."
If they provide a logo:
"I've extracted [list colors]. How would you like to use these in the theme?"
- Direct - Use these exact colors as the primary palette
- Complementary - Build a palette using complements/analogous colors that harmonize with the logo
- Accent only - Logo colors become accents, derive the rest from the vibe reference
- Something else - Tell me your vision
If they don't have a logo:
Q1: What type of store is this?
Fashion/apparel | Tech/digital | Food/beverage | Home goods | Beauty | Luxury | Artisan/handmade | Sports/outdoor | Kids/baby | Other
Q2: What's one real-world place or object this brand would be?
Not "what industry" - an actual specific thing. A Tokyo convenience store at 2am. A grandmother's kitchen. A brutalist parking garage. A coral reef. The cockpit of a 747. A flea market in Marrakech. A 1970s recording studio. A vintage record store. A luxury yacht interior.
Q3: What's the ONE emotion a shopper should feel landing on this store?
Pick ONE: Calm. Energized. Curious. Trusted. Delighted. Impressed. Rebellious. Nostalgic. Inspired. Luxurious. Welcomed. Confident. Intrigued. Sophisticated.
Q4: Pick TWO unexpected influences to collide:
Examples: "vintage pharmacy + streetwear", "art gallery + farmer's market", "space station + cozy cabin", "medical packaging + skateboard graphics", "luxury hotel + punk zine", "Japanese convenience store + Victorian library"
Q5: What should this store NEVER be mistaken for?
Name 2-3 specific things to actively avoid. "A dropshipping store", "Another Dawn theme", "A fast fashion brand", "Something corporate", "A crypto project"
Q6: What level of merchant customization?
- Opinionated with guardrails - Fewer options, but every combination looks good (harder to mess up)
- Flexible powerhouse - Lots of customization options, trust the merchant
- Design-system approach - Expose design tokens (colors, spacing, typography) but lock down layout decisions
Q7: What's the tech approach?
- Vanilla Liquid + CSS - Pure Shopify, no build step, maximum compatibility
- Tailwind-based - Use Tailwind CSS with a build process for rapid styling
- CSS custom properties heavy - Vanilla CSS but architected around design tokens/variables
If someone just says "build me a Shopify theme" with no context, ask:
Then synthesize a vibe from those three answers.
After Vibe Discovery, codify everything into a Theme DNA spec before touching templates.
This document becomes your source of truth. Every template decision references it.
THEME DNA: [Store Name]
========================
VIBE
----
Name: [2-3 word evocative name]
Reference: [Place/object from Q2]
Store Type: [From Q1]
Emotion: [From Q3]
Collision: [From Q4]
Anti-patterns: [From Q5]
DESIGN TOKENS
-------------
Colors:
Source: [logo-extracted | reference-derived | both]
Strategy: [direct | complementary | accent-only | custom] (if logo provided)
--color-primary: [hex] - [why, from logo or reference]
--color-secondary: [hex] - [why]
--color-background: [hex] - [why]
--color-surface: [hex] - [for cards, elevated elements]
--color-text: [hex]
--color-text-muted: [hex]
--color-accent: [hex] - [the pop color]
--color-sale: [hex] - [for price reductions]
Palette name: [evocative name]
Typography:
--font-heading: [specific font] - [why it fits the collision]
--font-body: [specific font] - [why]
--font-accent: [optional, for prices/labels]
Scale: [tight/normal/spacious]
Spacing:
--space-unit: [base unit, e.g., 4px or 8px]
Density: [compact/balanced/airy]
Borders & Radius:
--radius-small: [for buttons, inputs]
--radius-medium: [for cards]
--radius-large: [for sections, modals]
Style: [sharp/slightly-rounded/pill/organic]
COMPONENT PATTERNS
------------------
Buttons:
Primary: [description - filled, outline, ghost?]
Secondary: [description]
Hover behavior: [lift, glow, fill, etc.]
Cards (Product):
Image treatment: [aspect ratio, hover effect]
Info layout: [minimal/detailed]
Price display: [prominent/subtle]
Navigation:
Style: [sticky/static, transparent/solid]
Mobile: [drawer/full-screen/bottom-nav]
ANIMATION VOCABULARY
--------------------
Level: [still/subtle/moderate/dynamic]
Entrance: [fade/slide/blur/scale]
Signature animation: [one defining motion]
Product hover: [zoom/swap/lift/none]
PHOTOGRAPHY DIRECTION
---------------------
Style: [lifestyle/studio/editorial/mixed]
Mood: [matches the emotion from Q3]
What to avoid: [generic stock, specific styles]
WILDCARD
--------
[One unexpected detail that doesn't "match" but makes it memorable]
TECHNICAL
---------
Customization level: [from Q6]
Tech stack: [from Q7]
Before proceeding, verify:
Q1 - Store Type: Fashion/streetwear
Q2 - Place/Object: "A 1990s Tokyo arcade"
Q3 - Emotion: "Energized"
Q4 - Collision: "Vending machines + high fashion editorial"
Q5 - Never mistaken for: "A skate shop, anything minimalist, generic streetwear"
Q6 - Customization: Design-system approach
Q7 - Tech: CSS custom properties
Generated Theme DNA:
THEME DNA: Neon District
========================
VIBE
----
Name: Neon District
Reference: 1990s Tokyo arcade
Store Type: Fashion/streetwear
Emotion: Energized
Collision: Vending machines + high fashion editorial
Anti-patterns: No skate shop aesthetic, no minimalism, no generic streetwear
DESIGN TOKENS
-------------
Colors:
--color-primary: #0a0a0a - the darkness between machines
--color-secondary: #1a1a2e - deep arcade purple-black
--color-background: #0d0d0d - CRT off-state
--color-surface: #161622 - slightly elevated panels
--color-text: #e8e8e8 - screen glow white
--color-text-muted: #6b6b7b - dimmed display
--color-accent: #00ff88 - vending machine "ready" light
--color-sale: #ff3366 - arcade "INSERT COIN" pink
Palette name: "After Hours Glow"
Typography:
--font-heading: Darker Grotesque - compressed, bold, arcade signage energy
--font-body: Space Grotesk - technical but readable
--font-accent: IBM Plex Mono - for prices, like LED displays
Scale: tight
Spacing:
--space-unit: 4px
Density: compact (like crowded arcade aisles)
Borders & Radius:
--radius-small: 2px
--radius-medium: 4px
--radius-large: 8px
Style: sharp with slight rounding (CRT corners)
COMPONENT PATTERNS
------------------
Buttons:
Primary: Filled with accent color, sharp edges, ALL CAPS
Secondary: Outline with glow on hover
Hover behavior: Subtle glow effect, like button lighting up
Cards (Product):
Image treatment: 4:5 aspect ratio, scale-up on hover with slight glow
Info layout: Minimal - just title and price
Price display: Monospace font, prominent, LED-style
Navigation:
Style: Sticky, solid dark background
Mobile: Full-screen takeover with large touch targets
ANIMATION VOCABULARY
--------------------
Level: Moderate (energized but not chaotic)
Entrance: Fade-in with slight scale
Signature animation: Elements have subtle RGB shift on hover (like CRT phosphors)
Product hover: Scale up with glow bloom
PHOTOGRAPHY DIRECTION
---------------------
Style: Editorial with dramatic lighting
Mood: High contrast, neon-lit, nighttime energy
What to avoid: Natural light, lifestyle shots, anything "authentic"
WILDCARD
--------
Product grid occasionally "glitches" - one card slightly offset or with a scan-line effect
TECHNICAL
---------
Customization level: Design-system approach (expose tokens, lock layouts)
Tech stack: CSS custom properties heavy
Build the design as static HTML first. Get approval. Then convert to Liquid.
This is faster, easier to iterate, and lets you validate the vibe before dealing with Shopify's templating system.
preview/
├── index.html # Homepage
├── collection.html # Collection page
├── product.html # Product page
├── cart.html # Cart page
├── css/
│ └── theme.css # All styles (DNA tokens as CSS vars)
├── js/
│ └── preview.js # Any interactive elements
├── assets/
│ └── images/ # Sample product/lifestyle images
├── data/
│ └── products.json # Mock product data
└── serve.ts # Simple Bun preview server
1. Create the preview folder:
mkdir -p preview/{css,js,assets/images,data}
2. Create the preview server (preview/serve.ts):
// ABOUTME: Simple Bun server for previewing HTML mockups
// ABOUTME: Serves static files with live reload capability
const server = Bun.serve({
port: 3000,
async fetch(req) {
const url = new URL(req.url);
let path = url.pathname;
// Default to index.html
if (path === "/") path = "/index.html";
// Try to serve the file
const file = Bun.file(`./preview${path}`);
if (await file.exists()) {
return new Response(file);
}
// 404
return new Response("Not found", { status: 404 });
},
});
console.log(`Preview server running at http://localhost:${server.port}`);
3. Run the preview:
bun run preview/serve.ts
Each HTML file should mirror what the Shopify template will become. Use the same CSS variable names from your Theme DNA.
Example: preview/index.html (Homepage)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Store Name - Preview</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=YOUR_FONTS" rel="stylesheet">
<link rel="stylesheet" href="/css/theme.css">
</head>
<body>
<!-- HEADER: Will become sections/header.liquid -->
<header class="site-header">
<nav class="nav">
<a href="/" class="logo">Store Name</a>
<ul class="nav-links">
<li><a href="/collection.html">Shop</a></li>
<li><a href="#">About</a></li>
</ul>
<div class="nav-icons">
<button class="icon-btn cart-btn">Cart (0)</button>
</div>
</nav>
</header>
<main>
<!-- HERO: Will become sections/hero.liquid -->
<section class="hero">
<div class="hero-content">
<h1 class="hero-title">Your Headline Here</h1>
<p class="hero-subtitle">Supporting text that sells the vibe</p>
<a href="/collection.html" class="btn btn-primary">Shop Now</a>
</div>
<div class="hero-media">
<img src="/assets/images/hero.jpg" alt="Hero image">
</div>
</section>
<!-- FEATURED COLLECTION: Will become sections/featured-collection.liquid -->
<section class="featured-collection">
<h2 class="section-title">Featured Products</h2>
<div class="product-grid">
<!-- Product cards - use mock data -->
<article class="product-card">
<div class="product-image">
<img src="/assets/images/product-1.jpg" alt="Product Name">
</div>
<div class="product-info">
<h3 class="product-title">Product Name</h3>
<p class="product-price">$99.00</p>
</div>
</article>
<!-- Repeat for more products -->
</div>
</section>
</main>
<!-- FOOTER: Will become sections/footer.liquid -->
<footer class="site-footer">
<p>© 2024 Store Name</p>
</footer>
<script src="/js/preview.js"></script>
</body>
</html>
Example: preview/css/theme.css
/* ABOUTME: Theme styles using DNA tokens as CSS custom properties */
/* ABOUTME: This file will be split into Shopify's asset structure later */
:root {
/* Colors - from Theme DNA */
--color-primary: #0a0a0a;
--color-secondary: #1a1a2e;
--color-background: #0d0d0d;
--color-surface: #161622;
--color-text: #e8e8e8;
--color-text-muted: #6b6b7b;
--color-accent: #00ff88;
--color-sale: #ff3366;
/* Typography - from Theme DNA */
--font-heading: 'Darker Grotesque', sans-serif;
--font-body: 'Space Grotesk', sans-serif;
--font-accent: 'IBM Plex Mono', monospace;
/* Spacing - from Theme DNA */
--space-unit: 4px;
--space-xs: calc(var(--space-unit) * 2);
--space-sm: calc(var(--space-unit) * 4);
--space-md: calc(var(--space-unit) * 8);
--space-lg: calc(var(--space-unit) * 16);
--space-xl: calc(var(--space-unit) * 32);
/* Borders - from Theme DNA */
--radius-small: 2px;
--radius-medium: 4px;
--radius-large: 8px;
}
/* Base styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-body);
background: var(--color-background);
color: var(--color-text);
line-height: 1.6;
}
/* Component styles following DNA patterns */
.btn {
font-family: var(--font-heading);
text-transform: uppercase;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-small);
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background: var(--color-accent);
color: var(--color-primary);
border: none;
}
.btn-primary:hover {
box-shadow: 0 0 20px var(--color-accent);
}
/* ... rest of your styles */
preview/data/products.json
{
"products": [
{
"id": 1,
"title": "Product Name",
"price": 9900,
"price_formatted": "$99.00",
"compare_at_price": null,
"image": "/assets/images/product-1.jpg",
"image_alt": "Product description",
"vendor": "Brand Name",
"variants": [
{ "id": 1, "title": "Small", "available": true },
{ "id": 2, "title": "Medium", "available": true },
{ "id": 3, "title": "Large", "available": false }
]
}
],
"collection": {
"title": "All Products",
"description": "Browse our collection"
}
}
Before converting to Liquid, get explicit approval:
DESIGN APPROVAL CHECKLIST
=========================
□ Homepage hero matches the vibe
□ Product grid demonstrates DNA patterns
□ Typography hierarchy is clear
□ Color usage follows DNA spec
□ Mobile responsive (test at 375px, 768px, 1024px+)
□ Animations/interactions feel right
□ "Same store" test passes across all pages
□ Wildcard element is present
APPROVAL: [ ] Approved to convert to Liquid
[ ] Needs revisions (list below)
Revisions needed:
-
Only proceed to Liquid conversion after approval.
Once the HTML preview is approved, convert to Shopify's structure.
| HTML Preview | Shopify Equivalent |
|---|---|
preview/index.html | templates/index.json + sections |
preview/collection.html | templates/collection.json + sections |
preview/product.html | templates/product.json + sections |
preview/cart.html | templates/cart.json + sections |
preview/css/theme.css | assets/theme.css + snippets/css-variables.liquid |
HTML comments <!-- SECTION NAME --> | Individual section files |
1. Set up Shopify theme structure:
shopify theme init [theme-name]
2. Port CSS variables to Liquid settings:
Create snippets/css-variables.liquid:
{% raw %}
<style>
:root {
--color-primary: {{ settings.color_primary }};
--color-secondary: {{ settings.color_secondary }};
--color-background: {{ settings.color_background }};
--color-surface: {{ settings.color_surface }};
--color-text: {{ settings.color_text }};
--color-text-muted: {{ settings.color_text_muted }};
--color-accent: {{ settings.color_accent }};
--color-sale: {{ settings.color_sale }};
--font-heading: {{ settings.type_heading_font.family }}, {{ settings.type_heading_font.fallback_families }};
--font-body: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
}
</style>
{% endraw %}
3. Convert each HTML section to a Liquid section:
Example - Hero section (sections/hero.liquid):
{% raw %}
<section class="hero">
<div class="hero-content">
<h1 class="hero-title">{{ section.settings.heading }}</h1>
<p class="hero-subtitle">{{ section.settings.subheading }}</p>
<a href="{{ section.settings.button_link }}" class="btn btn-primary">
{{ section.settings.button_text }}
</a>
</div>
{% if section.settings.image != blank %}
<div class="hero-media">
<img
src="{{ section.settings.image | image_url: width: 1200 }}"
alt="{{ section.settings.image.alt | default: section.settings.heading }}"
loading="eager"
width="1200"
height="800"
>
</div>
{% endif %}
</section>
{% schema %}
{
"name": "Hero",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Your Headline Here"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Supporting text that sells the vibe"
},
{
"type": "image_picker",
"id": "image",
"label": "Hero image"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
],
"presets": [
{
"name": "Hero"
}
]
}
{% endschema %}
{% endraw %}
4. Convert product loops:
HTML:
<article class="product-card">
<img src="/assets/images/product-1.jpg" alt="Product">
<h3>Product Name</h3>
<p>$99.00</p>
</article>
Liquid:
{% raw %}
{% for product in collection.products %}
<article class="product-card">
<img
src="{{ product.featured_image | image_url: width: 600 }}"
alt="{{ product.featured_image.alt | default: product.title }}"
loading="lazy"
>
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
</article>
{% endfor %}
{% endraw %}
5. Move styles to assets:
preview/css/theme.css to assets/theme.csssnippets/css-variables.liquidsections/*.liquidassets/shopify theme check passesBuild templates modularly, always referencing the Theme DNA.
1. layout/theme.liquid
2. Homepage (index.json + sections)
3. Collection Page (collection.liquid)
4. Product Page (product.liquid)
5. Cart (cart.liquid or cart drawer)
For each section:
# Initialize new theme from Dawn (then customize heavily)
shopify theme init [theme-name]
# Or start from Dawn specifically
shopify theme init [theme-name] --clone-url https://github.com/Shopify/dawn.git
# For minimal start (more work, more control)
shopify theme init [theme-name] --clone-url https://github.com/Shopify/skeleton-theme.git
# Start local development server with hot reload
shopify theme dev --store [your-store.myshopify.com]
# Preview on specific port
shopify theme dev --port 9292
# Open theme editor alongside dev
shopify theme dev --theme-editor-sync
# List all themes on store
shopify theme list
# Push theme to store (creates new or updates existing)
shopify theme push
# Push to specific theme
shopify theme push --theme [theme-id]
# Pull latest from store (if edited in admin)
shopify theme pull
# Package theme for submission
shopify theme package
# Only push specific files
shopify theme push --only templates/*.json sections/*.liquid
# Ignore certain files
shopify theme push --ignore config/settings_data.json
# Development on unpublished theme
shopify theme dev --theme [theme-id]
shopify theme push --unpublishedshopify theme dev --theme [dev-theme-id]AVOID:
USE INSTEAD:
AVOID:
USE INSTEAD:
AVOID:
USE INSTEAD:
AVOID:
USE INSTEAD:
AVOID:
USE INSTEAD:
For Shopify Theme Store submission. Run through before packaging.
shopify theme checkBrand Cohesion:
Visual Distinction:
Technical:
shopify theme check passesSpaces: Night market in Bangkok | Empty museum at closing | Airport lounge at 4am | Vintage record store | Hospital waiting room | Casino floor | Greenhouse in winter | Subway platform | Observatory dome | Abandoned factory | Luxury yacht interior | 24-hour laundromat | Library rare books room | Auto body shop | Space station module | Tokyo arcade | Parisian cafe at dawn | Desert gas station
Objects: 1980s synthesizer | Surgical instruments | Vintage luggage | Racing motorcycle | Antique compass | Industrial loom | Neon sign | Typewriter | Scientific glassware | Leather-bound book | Circuit board | Porcelain dishware | Polaroid camera | Brass telescope | Concrete planter
Eras/Movements: Soviet constructivism | Memphis design | Swiss international | Art nouveau | Bauhaus | De Stijl | Googie architecture | Streamline moderne | Brutalism | Japanese metabolism | Scandinavian modernism | Italian futurism | 1970s earth tones | 1990s cyber | Y2K maximalism
1. VIBE DISCOVERY
└── Ask about logo/brand assets (optional)
└── If logo provided, extract color palette
└── Answer 7 questions
└── Synthesize unique direction
└── Name the vibe
2. THEME DNA
└── Write full DNA document
└── Define all tokens
└── Pass freshness check
└── This is your source of truth
3. HTML PREVIEW (Design First)
└── Set up preview/ folder structure
└── Build index.html (homepage) - 50% on hero
└── Build collection.html
└── Build product.html
└── Build cart.html
└── Implement all CSS using DNA tokens
└── Test responsive (375px, 768px, 1024px+)
└── Run preview server: bun run preview/serve.ts
4. DESIGN APPROVAL ⭐ CHECKPOINT
└── Review against DNA spec
└── Verify vibe matches intent
└── Check all pages feel cohesive
└── Get explicit approval before proceeding
└── Document any revisions needed
5. LIQUID CONVERSION (After Approval Only)
└── shopify theme init [theme-name]
└── Port CSS variables to snippets/css-variables.liquid
└── Convert each HTML section to sections/*.liquid
└── Add schema to each section
└── Replace static content with Liquid tags
└── Move styles to assets/
6. POLISH
└── Per-template checklist
└── Anti-slop review
└── Mobile pass
└── Empty state handling
7. VALIDATE
└── Quality gates
└── shopify theme check
└── Lighthouse audit
└── Cross-browser test
8. MARKETPLACE (if submitting)
└── Full marketplace checklist
└── All required templates
└── Documentation
└── shopify theme package