GitHubfrontendClaude Codeprompt
프롬프트 한 장으로 만든 튀니지 '시디 부 사이드' 3D 산책 씬
pulkitxm · 2026-06-16
# Sidi Bou Said — A Procedural 3D Walk Above the Gulf of Tunis
'네온 온 블랙의 정반대' — 반례로 톤을 지시한 랜딩페이지
Amber Foundry — Warm-Intelligence Operations Landing Page
가상의 AI 컨설팅사 랜딩페이지를 '전형적인 네온-온-블랙 AI 스타트업의 정반대'라는 반례 지시와 정확한 컬러 시스템(hex 고정)으로 만든 claude-directory 프로젝트. 원하는 것과 원하지 않는 것을 쌍으로 제시하는 미적 방향 지시의 좋은 예다.
# AMBER FOUNDRY — WARM-INTELLIGENCE OPERATIONS LANDING PAGE
## AESTHETIC IDENTITY
BUILD A SINGLE-PAGE, MULTI-SECTION MARKETING LANDING PAGE FOR A FICTIONAL ENTERPRISE-AI CONSULTANCY CALLED **AMBER FOUNDRY** — "OPERATIONAL EXCELLENCE, FORGED FROM INTELLIGENCE." THE NAMED DESIGN LANGUAGE IS **"WARM EDITORIAL INTELLIGENCE"**: A QUIET, EXPENSIVE, PAPER-AND-AMBER AESTHETIC THAT FEELS LIKE A LUXURY STRATEGY FIRM CROSSED WITH A SCIENTIFIC JOURNAL. THE OPPOSITE OF THE TYPICAL NEON-ON-BLACK AI STARTUP. EVERYTHING SITS ON WARM CREAM PAPER, ACCENTED BY A SINGLE MUTED AMBER/GOLD AND ANCHORED BY A DEEP ROASTED-COFFEE BROWN. NO GENERIC PURPLE GRADIENTS. NO GLASSMORPHISM. CONFIDENT, RESTRAINED, TACTILE.
## COLOR SYSTEM (EXACT)
- CREAM PAPER (PAGE BG): `#F6F0E9`
- ROASTED BROWN (PRIMARY TEXT / DARK SECTIONS): `#2B180A`
- MUTED AMBER / GOLD (ACCENT): `#DAB697`
- AMBER MUTED (10–20% TINTS OF GOLD FOR BORDERS/FILLS): `rgba(218, 182, 151, 0.1–0.2)`
- WARM TAUPE (SECONDARY/MUTED TEXT): `#94877C`
- WARM BUTTON FILL: `#EFE7DD`
- PURE WHITE (CARD SURFACES INSIDE CREAM): `#FFFFFF`
- BORDERS: HAIRLINE `rgba(218, 182, 151, 0.10–0.25)` ON LIGHT; `rgba(255,255,255,0.08)` ON DARK.
## TYPOGRAPHY
- DISPLAY / HEADINGS: A GROTESK-SERIF PAIR — **HOST GROTESK** (600/700) FOR BIG DISPLAY, FALLING BACK TO **HALANT** SERIF (400–700) FOR EDITORIAL WARMTH. TIGHT TRACKING (`-0.04em` TO `-0.07em`) ON LARGE HEADINGS.
- BODY / UI: **INTER** (300–600).
- MICRO-LABELS / EYEBROWS: INTER, UPPERCASE, BOLD, WIDE TRACKING (`0.2em`–`0.3em`), SMALL (10–12PX), IN AMBER OR BROWN.
- HERO H1: 80PX / 88PX LINE-HEIGHT ON DESKTOP, 48PX ON MOBILE. SECONDARY HALF OF THE HEADLINE IN TAUPE FOR A TWO-TONE EFFECT.
## LAYOUT & SECTION BREAKDOWN (TOP TO BOTTOM)
1. **FIXED HEADER** — CREAM, 80PX TALL, BACKDROP-BLUR, HAIRLINE BOTTOM BORDER. LEFT: WORDMARK "AMBER FOUNDRY" IN DISPLAY FONT. CENTER/RIGHT: NAV LINKS (SOLUTIONS, METHOD, PRICING) IN TAUPE WITH HOVER-TO-BROWN. FAR RIGHT: A SOLID BROWN PILL CTA BUTTON.
2. **HERO** — CENTERED, GENEROUS TOP PADDING. A SMALL PILL BADGE WITH A PULSING AMBER DOT AND THE EYEBROW "THE FUTURE OF OPERATIONS." A TWO-TONE H1 ("AUTOMATE COMPLEXITY." IN BROWN, "UNLOCK POTENTIAL." IN TAUPE BELOW). A TAUPE SUBHEAD PARAGRAPH (MAX ~2XL WIDTH). TWO CTAS: A SOLID BROWN "EXPLORE SOLUTIONS" AND A WHITE/OUTLINE "WATCH OUR METHOD" WITH A PLAY GLYPH. BELOW, A WIDE 21:9 VISUAL ANCHOR — A ROUNDED-3XL, SHADOWED HERO PANEL. INSTEAD OF A STOCK PHOTO, RENDER A SELF-CONTAINED CANVAS/SVG "NEURAL FOUNDRY" GRAPHIC: AN AMBER-ON-PAPER ANIMATED NODE-AND-EDGE NETWORK (SLOWLY PULSING NODES, FLOWING EDGE PARTICLES) WITH A SUBTLE WARM GRADIENT — NO EXTERNAL IMAGE.
3. **PARTNER MARQUEE** — FULL-WIDTH, BORDERED TOP & BOTTOM. LEFT-ALIGNED EYEBROW BLOCK ("NETWORK INTEGRITY" / "TRUSTED BY GLOBAL INNOVATORS") FOLLOWED BY A HAIRLINE RULE. AN INFINITE HORIZONTAL MARQUEE OF FAUX PARTNER WORDMARKS IN THE DISPLAY FONT AT LOW OPACITY, FADING AT BOTH EDGES VIA A MASK GRADIENT. ON HOVER EACH WORDMARK BOUNCES UP AND DARKENS.
4. **SOLUTIONS (INTERACTIVE SPLIT PANEL)** — ON WHITE. CENTERED HEADING + SUBHEAD. A TWO-COLUMN ROUNDED-3XL BORDERED CONTAINER (600PX TALL). LEFT COLUMN: FOUR STACKED ACCORDION-STYLE STEP TABS ("AUTONOMOUS CHAIN ARCHITECTURE," "NEURAL DATA SYNTHESIS," "COGNITIVE FRICTION ELIMINATION," "STRATEGIC INSIGHTS MATRIX"), EACH WITH AN ICON, A TITLE, AND AN EXPANDING DESCRIPTION; THE ACTIVE TAB HAS A WARM FILL AND AN ANIMATED AMBER PROGRESS BAR THAT AUTO-ADVANCES EVERY ~5S (AND ON CLICK). RIGHT COLUMN: A FINE AMBER DOT/LINE GRID BACKGROUND ON WHICH A DISTINCT, FULLY-BUILT MOCK UI CARD FADES/SWAPS IN FOR EACH STEP (A CHAIN CONFIGURATOR WITH TOGGLES & A LOAD BAR; A DATA-SYNTHESIS SYNC PANEL WITH SOURCE TILES; A LIVE CHAT/DECISION STREAM; A GROWTH-INSIGHT MATRIX WITH PROGRESS CARDS). BELOW LG, COLLAPSE TO A VERTICAL STACK OF STEP CARDS.
5. **METHOD (BENTO GRID)** — ON A WHITE ROUNDED-[40PX] PANEL FLOATING ON CREAM. CENTERED PILL EYEBROW ("OUR METHODOLOGY") + DISPLAY HEADING "THE ARCHITECTURE OF EFFICIENCY." A 12-COLUMN BENTO OF FOUR CARDS (5/7, 7/5 SPANS), EACH ~420PX TALL WITH AN ANIMATED ILLUSTRATION ZONE ON TOP AND A TITLE/BODY BELOW: (01) NODE MAPPING — TWO COUNTER-SCROLLING ROWS OF GLYPH TILES; (02) NEURAL SYNTHESIS — THREE OVERLAPPING TILTED CARDS (BROWN/GOLD/WHITE); (03) FRICTION REDUCTION — FLOATING STAT CARDS WITH PROGRESS BARS (-82% LOAD, +140% GROWTH); (04) CLOSED-LOOP LEARNING — A VERTICALLY AUTO-SCROLLING LIST WITH A FIXED "SYNC EVOLUTION" PILL.
6. **PRICING** — FULL-WIDTH **DARK BROWN** SECTION (THE ONE DRAMATIC TONAL FLIP), AMBER ACCENTS, CREAM TEXT. CENTERED HEADING + SUBHEAD. THREE TIERS (PILOT $15K, ENTERPRISE $45K+ — HIGHLIGHTED IN SOLID AMBER WITH A "MOST POPULAR" RIBBON, ELITE CUSTOM). EACH WITH AMBER CHECK / FADED-X FEATURE LISTS AND A FULL-WIDTH BUTTON.
7. **FAQ** — ON WHITE. PILL EYEBROW, DISPLAY HEADING, FIVE ACCORDION ITEMS WITH HAIRLINE DIVIDERS; CLICK ROTATES A PLUS-TO-X ICON AND SMOOTHLY EXPANDS THE ANSWER; ONLY ONE OPEN AT A TIME.
8. **FINAL CTA** — CENTERED, AIRY, LARGE TWO-LINE DISPLAY HEADLINE, SUBHEAD, A SOLID BROWN BUTTON + A TEXT LINK.
9. **FOOTER** — DARK BROWN WITH A FAINT AMBER GRID TEXTURE. 12-COLUMN: BRAND BLURB + SOCIAL ICON BUTTONS (HOVER FILLS AMBER), TWO LINK COLUMNS, AND A "NEURAL DISPATCH" EMAIL CAPTURE WITH AN INLINE AMBER "JOIN" BUTTON. BOTTOM BAR: COPYRIGHT + LEGAL LINKS IN TINY UPPERCASE TRACKED AMBER.
## MOTION / INTERACTION SPEC
- SCROLL REVEALS VIA INTERSECTIONOBSERVER: ELEMENTS START HIDDEN (OPACITY 0, TRANSLATED 40PX FROM BOTTOM OR -40PX FROM LEFT) AND EASE IN OVER ~1.2S WITH `cubic-bezier(0.16,1,0.3,1)`; UNOBSERVE AFTER FIRST REVEAL.
- HEADINGS USE A DISTINCT "BOUNCE" KEYFRAME (RISE FROM 60PX + SLIGHT OVERSHOOT/SETTLE) OVER ~1.8S.
- HERO NEURAL GRAPHIC: CONTINUOUS REQUESTANIMATIONFRAME CANVAS ANIMATION (PULSING NODES, FLOWING EDGE PARTICLES); CAP DPR, PAUSE WHEN OFF-SCREEN.
- SOLUTIONS PANEL AUTO-ADVANCES EVERY 5S WITH A LINEAR PROGRESS BAR; CLICK RESETS THE TIMER AND SWAPS THE MOCK CARD WITH A FADE.
- MARQUEES: PURE CSS `translateX/Y` LOOPS, EDGE-MASKED.
- FAQ ACCORDION: ANIMATE `max-height`/OPACITY, ROTATE ICON 45°.
- RESPECT `prefers-reduced-motion`: DISABLE THE CANVAS LOOP AND BOUNCE, KEEP CONTENT VISIBLE.
## RESPONSIVE BEHAVIOR
- DESKTOP MAX CONTENT WIDTH ~1392PX, GENEROUS SIDE PADDING (24–64PX).
- HERO H1 SCALES 48 → 80PX. SOLUTIONS SPLIT PANEL COLLAPSES TO A VERTICAL STEP STACK BELOW LG. BENTO COLLAPSES TO ONE COLUMN. PRICING GRID 3 → 1. FOOTER 12-COL → STACK. ALL TAP TARGETS ≥ 44PX.
## TECH / DELIVERY
- SELF-CONTAINED STATIC SITE (PLAIN HTML + CSS + VANILLA JS), RUNNABLE OFFLINE. VENDOR ALL FONTS LOCALLY (NO GOOGLE-FONTS CDN AT RUNTIME). NO EXTERNAL IMAGES — ALL VISUALS ARE CSS/SVG/CANVAS. NO BUILD STEP REQUIRED.
- POLISHED, DISTINCTIVE, NON-TEMPLATED. PIXEL-CLEAN HAIRLINES, SOFT WARM SHADOWS, CONSISTENT RADII (12 / 24 / 40PX).
이 프롬프트가 잘한 것
반례(무엇이 아닌지)로 미적 방향을 전달.
반례(무엇이 아닌지)로 미적 방향을 전달 — 형용사 나열보다 강력한 톤 지시 기법.
지시 명확성 가이드색·타이포·섹션을 스펙 블록으로 분리하고 EXACT를 명시 — 해석 여지를 줄이는 구조화.
구조화 가이드
사용 세팅
| model | claude-fable-5 |
|---|---|
| notes | 저장소 README에 '모든 프로젝트는 Claude Fable 5로 생성'이라 명시. 저장소에 .claude/agents 구성 존재 |
