Skip to content
PK

/ AI Designer system

Technical workflows, design intelligence, and inspectable proof.

AI Designer System

Inspect 15 repository-owned technical cases, the Generate / Audit / Refine / Redesign / Implement response model, design decisions, anti-slop evidence, source trace, and truthful limitations.

Browse technical proofsBack to live demos
01

Technical proof catalog

15 inspectable cases. No demo relabeling.

Browse repository-owned visual studies by output type, then open each technical case to inspect its brief, design contribution, decisions, refusals, canonical skill trace, and evidence limits.

Design output catalog

Browse complete websites, campaigns, commerce surfaces, product interfaces, systems, and design transformations. Output type leads; workflow remains supporting evidence.

Showing 15 design examples in all work.

Websites & landing pages

Editorial developer portfolio

Generate

Editorial developer portfolio

Created an authored portfolio direction with clear hierarchy, project storytelling, and a repository-native visual system.

A restrained portfolio direction built from one clear thesis, asymmetric composition, and proof-led project storytelling.

  • Portfolio
  • Editorial
  • Next.js
Pattern
Editorial index + project essays
Type
Expressive display / quiet technical body
Inspect brief and limitations

Input

Create a developer portfolio that feels authored and technical without becoming another dark SaaS landing page.

Result

A paper-and-ink editorial system with oversized type, deliberate whitespace, warm accent rules, and project evidence as the main narrative.

Truthful limitation

Repository-owned static study. It is not represented as deployed client work or externally approved production output.

Open full design case

Websites & landing pages

SaaS product launch landing page

Generate

SaaS product launch landing page

Created a complete launch narrative from product thesis to interface proof, operating value, and a restrained conversion path.

A complete product-launch direction that moves from one sharp product thesis into workflow proof, feature narrative, and a restrained conversion path.

  • Landing page
  • SaaS
  • Product marketing
Audience
Product leads, founders, and delivery teams
Narrative
Thesis → product proof → operating value → action
Inspect brief and limitations

Input

Create a product launch page for a planning workspace aimed at product teams who need decisions, roadmaps, and delivery context in one place.

Result

A dark editorial launch system with a focused hero, product interface specimen, progressive feature story, and two clear actions instead of a generic feature-card wall.

Truthful limitation

Synthetic product and static interface study. It does not claim real customers, live integrations, trial conversion, or measured product outcomes.

Open full design case

Marketing & campaigns

Food campaign landing page

Redesign

Korean street-food launch page

Replaced a generic restaurant template with a product-led campaign direction built around appetite, rhythm, and brand recall.

A broad direction replacement that moves from generic restaurant cards to a bold menu-first campaign with appetite and rhythm.

  • Campaign
  • F&B
  • Landing page
Genre
Korean street poster + editorial menu
Hierarchy
Product → dish → price → action
Inspect brief and limitations

Input

Replace a generic template direction for a Korean street-food brand that needs stronger product appetite and social-ready energy.

Result

A cream, red, and ink visual language with oversized menu typography, editorial pricing, and product-led composition.

Truthful limitation

The food composition is an interface study, not a generated product photograph or final advertising claim.

Open full design case

Marketing & campaigns

Consumer brand product campaign

Redesign

Consumer brand product campaign

Replaced a soft lifestyle template with bold product art direction, truthful product information, and reusable promotional modules.

A bold physical-product campaign that replaces soft lifestyle cliché with clear product truth, strong art direction, and reusable promotional modules.

  • Consumer brand
  • Campaign
  • Product story
Direction
Utility editorial · signal yellow · black product field
Story
Daily movement → product truth → repeatable campaign modules
Inspect brief and limitations

Input

Replace a generic beauty campaign direction for a daily mineral sunscreen with a more memorable visual language that still keeps product facts and limitations visible.

Result

A signal-yellow and ink campaign system with oversized editorial messaging, a centered product specimen, scenario modules, and product-proof blocks that can adapt across a launch page.

Truthful limitation

Synthetic brand and product specimen. It does not make clinical, dermatological, sustainability, or measured protection claims beyond the visible fictional brief.

Open full design case

Commerce & checkout

Checkout experience audit

Audit

Checkout friction audit

Diagnosed blocking validation, trust, and action-priority problems without disguising a redesign as an audit.

An annotated checkout study that names hierarchy, validation, trust, and action-priority failures before proposing changes.

  • Checkout
  • UX audit
  • Commerce
Priority
Errors → trust → action hierarchy
Method
Evidence-backed issue classification
Inspect brief and limitations

Input

Audit a checkout flow with weak validation, competing actions, and unclear order confidence without silently redesigning it.

Result

A prioritized evidence map that separates blocking usability failures from optional visual refinement.

Truthful limitation

The visual is a synthetic audit specimen built for this route; it does not claim measured conversion impact.

Open full design case

Commerce & checkout

Product detail and storefront experience

Generate

E-commerce product detail and storefront

Created a product-led purchase experience with clear media, options, fulfillment, trust, and related-collection navigation.

A product-led storefront specimen that makes media, material, price, variants, delivery, purchase action, and related navigation easy to understand.

  • Product detail
  • Storefront
  • Mobile purchase
Hierarchy
Product media → name/price → variant → purchase → trust
Mobile
Purchase decision stays readable without a dense sidebar
Inspect brief and limitations

Input

Design a premium but practical product detail experience for a carry-goods brand, including product media, options, trust information, and mobile-ready purchase hierarchy.

Result

A warm material-first commerce system with a dominant product gallery, concise decision information, visible fulfillment details, and related products that support collection browsing.

Truthful limitation

Synthetic product, price, and availability data. Checkout, inventory, shipping calculation, and payment behavior are not connected to a commerce backend.

Open full design case

Dashboards & product interfaces

Operations dashboard refinement

Refine

Operations dashboard refinement

Refined hierarchy, density, and scan order while preserving the existing product model and operational data.

A before-and-after proof that preserves the product model while correcting hierarchy, density, and scan order.

  • Dashboard
  • SaaS interface
  • Refinement
Preserve
Existing metrics and navigation model
Correct
Hierarchy, spacing, grouping, contrast
Inspect brief and limitations

Input

Improve a functioning dashboard whose repeated cards, weak emphasis, and inconsistent spacing make daily scanning slow.

Result

The same information architecture with a dominant operational signal, quieter secondary metrics, and a clearer table rhythm.

Truthful limitation

Static refinement study. Keyboard, data behavior, and production performance remain outside this visual specimen.

Open full design case

Design systems

Repository-native component system

Implement

Repository-native component system

Mapped an approved direction into reusable tokens, components, states, focus behavior, and dual-theme semantics.

An implementation proof showing how design direction maps to tokens, states, and existing components instead of a parallel UI kit.

  • Design system
  • Components
  • Themes
Reuse
Button · Badge · Input · semantic tokens
States
Default · hover · focus · disabled
Inspect brief and limitations

Input

Translate an approved design direction into reusable interface primitives while preserving the repository stack and theme system.

Result

A compact token and component specimen covering action hierarchy, fields, status, spacing, focus, and dual-theme behavior.

Truthful limitation

This proof demonstrates source-shaped implementation guidance; executable Storybook and browser evidence are separate gates.

Open full design case

Audit, refinement & review

Responsive interface acceptance review

Review

Responsive interface acceptance review

Reviewed desktop and mobile interface regions against evidence-aware design gates and truthful acceptance boundaries.

A visual acceptance study that links desktop and mobile regions to governing gates, evidence status, impact, and bounded correction direction.

  • Design review
  • Responsive
  • Acceptance
Profile
Web marketing · digital interface
Contexts
Desktop + mobile visual specimen
Inspect brief and limitations

Input

Review an implemented marketing interface across responsive, keyboard, theme, accessibility, motion, and runtime concerns without inventing approval from source alone.

Result

An evidence-aware review showing what is inspectable, what remains unverified, why the gaps matter, and the smallest next action for each finding.

Truthful limitation

Synthetic review specimen. It does not claim browser, screen-reader, measured contrast, reduced-motion, runtime, or production acceptance.

Open full design case

Dashboards & product interfaces

Mobile application journey

Generate

Commuter mobile journey

Created a complete touch-first journey from first use through route planning, live trip status, disruption recovery, and arrival confirmation.

A touch-first transit experience that guides a commuter from first-use preferences into route planning, disruption awareness, and a confident arrival state.

  • Mobile app
  • Primary task flow
  • Product states
Primary task
Choose destination → compare route → track trip
Navigation
Home · Trips · Saved · Profile
Inspect brief and limitations

Input

Create a mobile transit companion for daily commuters who need fast route decisions, visible service changes, and calm recovery when a journey is disrupted.

Result

A compact mobile product system with short onboarding, one dominant route action, persistent trip status, bottom navigation, and explicit loading, success, offline, and service-error states.

Truthful limitation

Synthetic mobile product study. Routes, times, service alerts, account state, GPS, ticketing, and live transit data are not connected to production services.

Open full design case

Dashboards & product interfaces

SaaS analytics workspace

Refine

SaaS analytics workspace

Refined a dense analytics surface around one operating question, persistent filter context, exception-led data, and responsive decision flow.

A dense analytics workspace refined around one operating question, persistent filters, readable trends, and a table that supports action without dashboard-card repetition.

  • SaaS workspace
  • Analytics
  • Data table
Question
Where did activation change, and what needs action?
Hierarchy
Trend → drivers → exception table → action
Inspect brief and limitations

Input

Refine a SaaS analytics screen whose equal metric cards, detached filters, and decorative charts make it difficult for a growth team to find changes that need action.

Result

A workspace with stable navigation, a single primary trend, compact comparison metrics, filter provenance, exception-led rows, and a constrained-width mode that preserves the decision path.

Truthful limitation

Static analytics specimen using synthetic data. Query behavior, permissions, exports, saved views, chart accessibility, and production performance remain unverified.

Open full design case

Design systems

Multi-surface interface system

Implement

Multi-surface interface system

Systematized semantic foundations and component families across operations, mobile, and marketing surfaces without introducing a parallel framework.

A semantic interface system proving that one token, typography, component, and interaction contract can support product, mobile, and marketing surfaces without becoming a parallel framework.

  • Design system
  • Component library
  • Web and mobile
Foundation
Semantic color, type, space, radius, focus, elevation
Families
Actions · fields · navigation · status · data display
Inspect brief and limitations

Input

Systematize an approved visual direction into reusable foundations and component families that can serve an operations workspace, a mobile application, and a public product page.

Result

A documented system plate covering semantic tokens, typography roles, actions, fields, navigation, data display, validation, focus, themes, and three representative surface compositions.

Truthful limitation

Repository-shaped static system study. It does not claim a published package, complete Storybook coverage, browser-tested components, consumer adoption, or production accessibility acceptance.

Open full design case

Audit, refinement & review

Legacy SaaS before-and-after refinement

Refine

Legacy SaaS interface refinement

Preserved the mature product model while correcting navigation weight, density, status hierarchy, scan order, and constrained-width behavior.

A bounded refinement that preserves the product model while correcting navigation weight, information density, state visibility, and responsive scan order.

  • Before and after
  • SaaS
  • Bounded refinement
Preserve
Routes · permissions · records · actions · status meanings
Budget
Presentation and interaction hierarchy only
Inspect brief and limitations

Input

Refine a mature account-administration workspace whose repeated panels, oversized navigation, weak state hierarchy, and narrow-screen collapse slow down routine work without changing its permissions or information model.

Result

A before-and-after workspace that keeps the same navigation destinations, records, actions, and status meanings while introducing a compact rail, one dominant work queue, clearer row hierarchy, and a deliberate constrained-width mode.

Truthful limitation

Static refinement specimen. It does not claim migrated production data, validated permissions, measured task-time improvement, or browser-tested responsive behavior.

Open full design case

Audit, refinement & review

Mobile commerce audit and correction

Audit

Mobile commerce audit and correction

Diagnosed purchase blockers with severity and evidence, then demonstrated bounded correction direction without disguising a redesign as an audit.

An evidence-led audit that identifies purchase blockers, ranks their impact, and demonstrates bounded correction direction without silently redesigning the entire storefront.

  • UX audit
  • Mobile commerce
  • Correction direction
Evidence
Observed screen state → concrete failure → bounded impact
Priority
Variant certainty → delivery trust → validation → purchase action
Inspect brief and limitations

Input

Audit a mobile product-detail and cart flow where variant selection, delivery confidence, validation, and the primary purchase action compete for attention.

Result

A finding-to-correction model with severity, evidence, user impact, preserved commerce boundaries, and corrected mobile screens that clarify selection, fulfillment, errors, and checkout readiness.

Truthful limitation

Synthetic audit specimen. It does not claim real session recordings, conversion data, customer research, payment integration, or measured commercial improvement.

Open full design case

Audit, refinement & review

Brand experience redesign and review

Redesign

Brand experience redesign and review

Compared materially different directions, selected one with explicit trade-offs, produced the complete outcome, and kept review independent from authorship.

A direction-selection study that compares materially different brand systems, commits to one outcome, and separates redesign authorship from independent acceptance review.

  • Redesign
  • Direction selection
  • Acceptance review
Alternatives
Quiet luxury · expressive nightlife · mineral editorial
Selected
Mineral editorial for product truth and stronger recall
Inspect brief and limitations

Input

Replace an interchangeable premium-beverage campaign with a distinctive product experience while preserving the bottle, factual product information, and a credible retail path.

Result

Three contrasting directions, one selected mineral-editorial system, a complete launch composition, explicit trade-offs, and an evidence-aware review that records what is visible and what remains unverified.

Truthful limitation

Synthetic brand and product study. It does not claim client selection, retail availability, taste testing, legal approval, campaign performance, or production acceptance.

Open full design case
02

Technical workflow system

Different design problems require different responses.

Inspect how AI Designer chooses Generate, Audit, Refine, Redesign, or Implement. Review remains an independent acceptance gate rather than a self-approval step.

Choose a production response

Selection updates one deterministic response model. No runtime AI request or mutable upstream source is involved.

Selected production response

Replace the bones when direction is wrong.

Redesign

Compare real alternatives, select one coherent direction, lock preservation boundaries, and produce an engineering-ready handoff.

Use when

The macrostructure, experience model, component voice, or overall design direction is broadly wrong or missing.

Refuses

No pixel copying, uninspected concurrent overwrite, hidden scope expansion, or production before direction and implementation mapping.

Alternatives
Materially different directions with trade-offs
Direction
Genre, macrostructure, hierarchy, expression, and interaction
Locks
Scope, preservation, ownership, and prohibited changes
Handoff
Repository implementation map and verification plan

Build success is not design approval; acceptance requires independent design and architecture review.

Primary · Redesign WorkflowMaster DesignImplementation Context DiscoveryMaster EngineerDesign Review
Inspect Redesign Workflow
03

Design intelligence

Visible outcomes come from explicit decisions.

This example is tied to technical proof 01: Editorial developer portfolio. It demonstrates the reasoning behind one result without presenting the case as a complete public demo.

Starting brief

Create a developer portfolio that feels authored and technical without becoming another dark SaaS landing page.

Repository-owned static study. It is not represented as deployed client work or externally approved production output.

Pattern

Editorial index + project essays

Type

Expressive display / quiet technical body

Palette

Paper neutral + one warm accent

Stack

Next.js · Tailwind · shared shell

04

Process

From vague intent to reviewable interface work.

The system routes the task before styling, maps the selected direction into repository conventions, and keeps review separate from authorship.

  1. 01

    Understand

    Read the brief, existing interface, repository, constraints, and product intent.

  2. 02

    Route

    Choose Generate, Audit, Refine, Redesign, or Implement from the evidence; Review governs acceptance.

  3. 03

    Direct

    Define hierarchy, genre, layout, typography, color, components, interaction, and refusals.

  4. 04

    Build

    Map the direction to repository-native components, tokens, and stack conventions.

  5. 05

    Review

    Inspect the complete rendered journey for design, accessibility, responsiveness, theme, and anti-slop failures.

  6. 06

    Refine

    Correct evidence-backed defects without reopening passing regions or inventing completion evidence.

05

Anti-slop evidence

Generic defaults are rejected in the visible result.

Each refusal points to technical evidence, so the correction can be judged instead of accepted as design jargon.

  1. 01

    Reject

    Equal cards for every idea

    Visible correction

    Assign hierarchy before selecting containers.

    Evidence: Operations dashboard refinement
  2. 02

    Reject

    Purple gradient as an AI identity

    Visible correction

    Derive color from product genre and content role.

    Evidence: Editorial developer portfolio
  3. 03

    Reject

    Style before product context

    Visible correction

    Choose the lifecycle and design system from the actual brief.

    Evidence: Korean street-food launch page

Inspect the source

The demos prove output. The system explains direction.

Inspect the pinned AI Native Skills that route design work, generate direction, preserve or replace existing interfaces, map outcomes into code, and review the result.

Open AI Native SkillsOpen live demo gallery