Develop subject-specific art direction for public websites using the complete Taste v2 reference library and browser inspection workflow.
Develop subject-specific art direction for public websites using the complete Taste v2 reference library and browser inspection workflow.
# Design Taste Frontend ## Scope and complete package Use Taste v2 for public marketing, portfolio, editorial, and product pages. Do not apply its landing-page composition rules to dashboards, settings, tables, or task-heavy product screens. Favorite and synchronize this Skill to receive the complete pinned upstream instructions, nine reference documents, scripts, design library, base assets, and evaluations. A hosted read supplies this guide, not executable files. ## Workflow 1. Inventory eight to twelve details specific to the subject: its name, materials, place, product output, constraints, rituals, and available imagery. Write each section as a claim with proof. Never invent proof. 2. In the synchronized local package, run the direction-dealing script with the real sector, section roles, brand constraints, and assets. Compare its three directions against the inventory, choose one that belongs to this subject, and record the seed and any justified redraw. Do not combine competing visual systems. 3. State how a subject-specific thing becomes the compositional device, and test whether the idea would still fit the nearest competitor. Design one useful live interaction with real content and a plain fallback. 4. Write the full copy deck before markup. Keep headlines short, make the first viewport answer the visitor’s main question, and supply the complete information each section promises. 5. Build tokens, hero, distinct sections, imagery, live interaction, semantics, and mobile composition. Prefer owned images, authorized generation, or credited open collections. Found pictures must not be represented as the client’s product, people, or premises. Preserve image licenses and credit. 6. With the local companion, run its source linter and real-browser inspector at 1440, 768, and 390 pixels. Inspect every screenshot, record the critique, and fix the highest-impact issues in bounded passes. With no compatible Node/browser, use available host inspection and explicitly mark the scripted checks as unrun. 7. Add purposeful motion after the static design works. Preserve readable content without scripts and honor reduced motion, touch, focus, and performance. A fixed visual quota must never override the user’s brand, accessibility, or actual assets. ## House style and precedence The upstream package supplies a strict art direction: no generic eyebrow badges, stock icon-card grids, ornamental rules, resting shadows, glass, or decorative gradients; use type scale, flat color, real imagery, and full content. Preserve the user’s established brand and functional product UI. Do not apply multiple Skills’ conflicting style rules to the same surface. Record any justified exception rather than claiming an inspector passed. ## Runtime and output The full workflow requires Node 22+ and Chrome, Edge, or Chromium for browser measurement. Asset searches require network access; they do not need API keys. Review the synchronized scripts before running them. Keep their project-local output in the website project, not the installed Skill directory. Deliver the direction and seed, idea sentence, working interaction, screenshots, actual gate/critique results, image credits, redraw reasons, and sample content to replace. Without the companion, perform only host-supported critique and handoff; do not claim that direction dealing or automated inspection ran. ## Source and rights Read [the pinned upstream and license](UPSTREAM.md).
