Given selected Figma frame(s):

1. Study the selection — never skip to component assembly.
2. Extract Design DNA (layout, typography, visual, component, composition).
3. Write a one-sentence creative thesis for the new page.
4. Design one or more directions (Native / Evolved / Provocation) built on that thesis.
5. Run the Creative Director pass; redesign weak areas, don't just polish.
6. Ship new frames next to the source with a concise concept annotation. Never touch the source frames.

If no frame is meaningfully selected, stop and ask the user to select source frame(s) — do not guess.

Progress:

• Step 1: Read the selection fully (structure, grid, type, color, components, rhythm, exceptions)
• Step 2: Extract Design DNA (layout / typography / visual / component / composition)
• Step 3: Identify 5–10 specific signature behaviors (only ones actually present)
• Step 4: Find the creative tension (what's restrained vs. expressive, where the grid breaks)
• Step 5: Write the concept thesis (one sentence, grounded in the extracted DNA)
• Step 6: Resolve content (use provided content as truth; lightweight placeholder only if needed)
• Step 7: Design the page as one composition — not independently solved sections
• Step 8: Build with Auto Layout, existing components/variables/styles, logical nesting
• Step 9: Run Creative Director pass — detect slop, fix root composition, not surface polish
• Step 10: Final DNA fidelity check against source
• Step 11: Create concept annotation frame + place new frame(s) beside source, properly named

Step 1 — Read the Selection

Inspect: page structure, hierarchy, section order, grid, columns, alignment, margins, spacing, type scale, line length, density, color, image crops, components, borders, surfaces, icons, negative space, asymmetry, overlap, rhythm, editorial behaviors, grid exceptions. If multiple frames: find shared rules, intentional differences, and exceptions that create character. Never modify the source.

Step 2 — Extract Design DNA

Summarize internally across five dimensions — Layout, Typography, Visual, Component, Composition. Composition DNA (how focus, tension, rhythm, and pacing are created) matters more than cataloguing components.

Step 3 — Signature Behaviors

Name 5–10 concrete, specific behaviors actually observed (e.g., "oversized type acts as the grid," "thin rules replace cards as the organizing device"). Never invent a behavior unsupported by the source.

Step 4 — Creative Tension

Determine: editorial vs. systematic? Where does hierarchy come from (scale/spacing/density/color/imagery)? Where does the grid break on purpose? What could be pushed further without losing identity? Do not sand the tension down into something conventional.

Step 5 — Concept Thesis

One or two sentences stating what the composition is trying to do (e.g., "Typography becomes the primary structural device and organizes the page before containers do"). Every direction needs a thesis before any visual work starts.

Step 6 — Content

Use provided content/requirements as source of truth. Never invent stats, testimonials, customers, awards, or features. If content is missing, use clearly-placeholder copy that supports layout evaluation without faking facts.

Step 7 — Compose the Whole Page

Treat the page as one composition strategy, not a stack of independently solved sections. Before finalizing, answer: what's seen first/second, where does it accelerate/slow/breathe/densify, which section is dominant, where's the visual climax, where does the grid intentionally shift, how does each section lead to the next.

Step 8 — Build Quality

Use frames, Auto Layout, logical nesting, existing components/variables/styles. Reuse or adapt existing patterns before creating new ones. Absolute positioning only when intentional to the composition.

Step 9 — Creative Director Pass

For each direction, check:

• Can it be described in one sentence (an idea, not just styling)?
• Does it feel authored (specific decisions) vs. generated?
• Is there real contrast (large/small, dense/open, loud/quiet, image/type, structure/interruption)?
• What's the most predictable section — improve it without breaking the DNA.
• What's decorative-only — remove it.
• Is there at least one genuinely memorable moment?

Step 10 — Final DNA Check

Compare against source: typography fidelity, grid fidelity, spacing fidelity, component fidelity, visual-language fidelity, composition quality, layout originality, AI-slop risk. High slop risk → redesign the affected area, don't just polish.

Step 11 — Output

New frames beside the source, named [Page Name] — Native / Evolved / Provocation (or concept name). Each paired with a compact annotation: Concept, Thesis, Preserved, Pushed, Why it works. Never overwrite the source.

Example 1: Input: Selected frame is a dense editorial blog homepage with thin hairline rules, oversized serif headlines, tight asymmetric 12-col grid, no cards, no shadows. User asks for a new "Pricing" page. Output: Thesis — "Pricing becomes an editorial table of contents rather than a feature-card grid." Native direction uses the same hairline rules to separate tiers as rows under an oversized headline. Evolved direction turns tier comparison into a typographic column spread with the price as the dominant visual element. Provocation removes containers entirely — tiers are distinguished purely by type scale and rule weight, with one tier breaking the grid as the recommended plan. Annotation calls out "Preserved: hairline rules, serif headline scale, no shadows. Pushed: type scale now carries tier hierarchy instead of card surfaces."

Example 2: Input: Selected frame is a bold, saturated-color startup landing page with overlapping image planes and a single oversized accent color on dark background. User asks to explore 3 directions for a new feature page. Output: Native keeps the overlap/dark/accent system, applies it to a feature narrative with large sequential sections. Evolved pushes the overlap into a staggered scroll narrative where each feature's image bleeds into the next section. Provocation turns the accent color into the organizing structural device (section dividers, numerals, rule lines) instead of just decoration, intentionally breaking the symmetric layout from the source. All three avoid feature-card grids, generic icon+title+paragraph blocks, and testimonial walls since the source showed no such patterns.