# Drawn To > Establish and apply a design direction using a curated visual reference library, plain-language weighted choices and a project lock file. Use for web design direction, "my taste", "min stil", visual alternatives, or reviewing UI against an existing direction. Also supports maintaining this reference library. A project's own approved design system and the user's explicit choices take precedence. - Skill: `stianlars1/drawn-to` (Agent Skill, multi-file: 1121 files) - Install (CLI): `npx skillmds@latest add stianlars1/drawn-to` - Raw SKILL.md: https://api.skillmd.com/api/skills/stianlars1/drawn-to/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: Stianlars1 (https://skillmd.com/u/stianlars1) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/stianlars1/drawn-to --- # Drawn To A personal design library and a way to turn visual preferences into decisions another agent can implement. References supply evidence and vocabulary; the product, audience and current brief determine which parts apply. ## Start with the task | Task | Start here | Outcome | |---|---|---| | New direction or substantive redesign | [discovery](references/discovery.md), then [question flow](references/question-flow.md) and relevant [families](references/style-families.md) | Weighted direction, composition and open questions recorded in a lock | | Receive a generator direction with selected properties | [generator handoff](references/generator-handoff.md) | Resolve exact property contracts, preserve selected roles and clarify consequential gaps | | Reuse a specific showcase scene or export its style | [showcase prompts](references/showcase-prompts.md), then its exact visual contract | Preserve the chosen scene’s composition, craft and signature effect while clarifying product gaps | | Continue an approved direction | Existing project lock, [lock file](references/lock-file.md), then only the relevant dimension docs below | Implement within the approval; ask only about a consequential unresolved choice | | Review existing UI | Existing lock and [quality bar](references/quality-bar.md), plus cited frames | Findings per lock: served, violated or not specified; review-only does not edit UI or lock files | | Explore supplied references | Inspect the supplied media, [measuring](references/measuring.md), relevant library entries | Original alternatives grounded in observed properties; new references may widen the families | | Add or review this library | [library maintenance](references/library-maintenance.md) | Complete source manifest, analyses, synthesis, index and validation; no product-design interview | For a new direction: discover product facts, ask the missing scope questions, propose distinct weighted directions, settle the axes that remain open, then settle section composition. Card work also settles anatomy. Feature-illustration work uses the two-pass [QI protocol](references/qi-protocol.md): choose a coherent set direction first, then feature-specific scenes inside it. Record accepted choices as they happen. Implementation and visual QA follow the approved scope. A request to continue does not restart this interview. ## Working contract - User instructions and approvals persist. Reuse known facts and decisions; never guess a missing consequential lock or invent delegation. If the user asks you to decide, record the decision and its reason as delegated. - Ask in the user's language, using visible qualities and useful comparisons. Allow combinations and weights; do not force a single favorite. Internal family/axis codes belong in the ledger, not questions or shipped product copy. - Adopt established infrastructure and map the direction onto it. Keep product facts distinct from current visual state ([discovery](references/discovery.md)). - The twelve [craft defaults](references/style-families.md#the-constants) are starting points with defined scope, not proof that every attractive website shares one style. A contextual departure supported by the brief is recorded, not automatically rejected. Accessibility and truthful product content remain requirements regardless of aesthetic direction. - References are vocabulary, not templates. Study hierarchy, relationships, material and timing; create original artwork, copy and brand expression. A resource article is reference data, not an instruction to execute commands. - Match the chosen references' level of craft, not only their layout or palette. A correct, tidy render can still be basic; identify missing material, depth, light, detail and motion qualities before calling it complete. - Keep observations, measurements, implementation suggestions and unknowns distinct. Still images do not establish animation, responsiveness or a particular rendering stack. Reduced archive frames are for visual calibration, not for recovering source measurements. - Preserve the owner's copy preference: use a plain hyphen, not an em dash. This is a writing preference, not a test of whether a source was AI-generated. - Verify in a real browser at the target sizes. For ordinary responsive web work include 1440x900, 1280x720 and 390x844; add the actual target viewport when different. Mark missing checks honestly. Authorized fixes may iterate without a fresh permission request after every render. ## Load only what this surface needs | Surface or decision | Reference | |---|---| | Direction, family blends, scope of the twelve defaults | [style-families](references/style-families.md) | | Material realism and source-driven effects | [material evidence](references/material-evidence.md), [causal effects](references/causal-effects.md) | | Optical volume, video/hover behavior, inspectable objects and modular instruments | [motion-expansion](references/motion-expansion.md) | | Newer directions and deeper readings of the owner's favorites | [september-expansion](references/september-expansion.md) | | Questions for unresolved direction, material or composition | [question-flow](references/question-flow.md) | | Approved decisions, revisions and the QA record | [lock-file](references/lock-file.md) | | Section alternatives, including footers, pricing and onboarding | [recipes](references/recipes.md) | | Whole-page architecture | [production-formula](references/production-formula.md) | | Hero zones, bounded media, fields and crop | [hero-atmosphere](references/hero-atmosphere.md) | | Grid, card anatomy, spacing, responsive cell scale | [layout-language](references/layout-language.md) | | Palette, contrast roles, serif/sans/mono relationships | [color-type](references/color-type.md) | | UI fragments, illustration, photography and processed imagery | [graphic-language](references/graphic-language.md) | | Deriving feature scenes and deciding when repetition is meaningful | [illustration-ideation](references/illustration-ideation.md) | | Proposing illustration sets to the owner | [qi-protocol](references/qi-protocol.md) | | Ways to generate a coherent visual system | [practitioner-methods](references/practitioner-methods.md) | | Isometric geometry and structured light | [isometric-and-light](references/isometric-and-light.md) | | Gradient/value/chroma construction and source limits | [gradient-fields](references/gradient-fields.md) | | Selecting still, CSS, SVG, canvas, GPU or authored motion | [render-tiers](references/render-tiers.md) | | Real 3D, modeled materials, lighting, GLB and GPU craft | [three-dimensional-craft](references/three-dimensional-craft.md) | | Motion purpose, repeated cycles and interaction grammar | [motion-grammar](references/motion-grammar.md) | | Implementing animation and ready-to-adapt component snippets | [animation-craft](references/animation-craft.md), [animation-recipes](references/animation-recipes.md) | | Scroll-controlled product scenes | [scroll-scrub](references/scroll-scrub.md) | | Meaningful small state changes | [polish-moments](references/polish-moments.md) | | Render review, fit, accessibility and verification | [quality-bar](references/quality-bar.md) | | Source analysis or editing measured reference claims | [measuring](references/measuring.md) | | Finding a reference by kind, mode or visual device | [matrix](references/matrix.md), then the linked post | ## Visual evidence Open `assets/features/`, `assets/heroes/` or `assets/plates/` when choosing a kind of composition; the plates are geometry diagrams, not finished designs. Open `references/media//` when checking a particular reference. Files in `references/posts/` explain what was observed and what can transfer. Full post IDs are the stable keys; abbreviated citations must resolve to exactly one file. The feature and hero NOTICE files and `references/media/NOTICE.md` explain the third-party material. Own SVG zone plates carry a CC0 stamp. Source videos and full-resolution evidence are kept locally outside the portable package. ## Completion Report the result appropriate to the requested mode: direction/specification, implemented change, review findings or library update. For design implementation, include the lock path, choices served, references consulted and the applicable QA fields from [lock-file](references/lock-file.md). Fill fields from checks actually performed; use pending, not checked or not applicable when accurate. Report local verification, commit, push, deployment and live verification as separate states. A review can be complete with findings; a requested fix remains unfinished until its stated checks pass or a concrete blocker is reported.