# Lookdev > Human-in-the-loop web studio to tune AI-generated output by eye. Stand up a local interactive studio (sliders, pickers, drag handles) or an inline edit/highlight/comment annotation studio for prose & - Skill: `ranbot-ai/lookdev` (Agent Skill) - Install (CLI): `npx skillmds@latest add ranbot-ai/lookdev` - Raw SKILL.md: https://api.skillmd.com/api/skills/ranbot-ai/lookdev/raw - Safety review: PASS (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: ranbot-ai (https://skillmd.com/u/ranbot-ai) - Updated: 2026-08-19 - Page: https://skillmd.com/skills/ranbot-ai/lookdev --- ## When to Use Use when the user says "lookdev", or asks to tune / dial in / iterate on the look of something, compare variations by feel, or review / edit / annotate a blog post, doc, copy, or media set. Use whenever "show me, I'll pick" beats asking the user to specify a number, and whenever you'd otherwise hand back a static grid or a wall of prose for review. _Source: [connerkward/lookdev-studio-skill](https://github.com/connerkward/lookdev-studio-skill) (MIT)._ # Lookdev When the user says **"lookdev"** — or any of: *tune*, *dial in*, *iterate on the look of*, *compare variations of*, *let me adjust*, *let me edit/annotate/mark up*, *review this post/doc/copy* — they mean **build an interactive in-browser tool the user directly manipulates**. Not a static grid of N variations. Not a Q&A where they specify numbers. Not a wall of prose they're asked to read and reply to in chat. A real-time studio where they act on the artifact and the change is captured. **Two studio shapes — pick by what's being tuned:** - **Visual-parameter lookdev** — the artifact's *look* is set by numbers/choices (color, type, layout, image treatment, animation, 3D). Controls = sliders, pickers, drag handles. This is the bulk of this skill (below). - **Text & media lookdev** — the artifact is a *document, blog post, copy, or media set* and the user is editing/curating it: rewriting sentences, cutting boring paragraphs, highlighting, leaving margin comments, flagging "diagram goes here" / "wrong image, replace." Controls = **direct inline editing + selection highlight + anchored comments + media annotation**. See the dedicated section below. **A blog post / doc / script review IS this mode — never hand back a long markdown file and ask the user to react in chat. Stand up the annotation studio.** ## What it covers Any visual decision the user picks by feel, not by spec. Expand this list as needed: - **Image processing** — dither, halftone, posterize, ASCII, blur, edge, quantize, mosaic, color-grade - **Color** — palette extraction (show coverage %), per-band pickers, saturation / contrast / gamma curves, harmony presets, theme tokens - **Typography** — font selector, size / weight / leading / tracking / measure, live sample text, fallback stack - **Layout, positioning, framing, spacing** — draggable & selectable elements; resize handles; margin / padding rulers; alignment guides; snap-to-grid; aspect-lock toggles - **Crop & framing** — draggable crop rectangle with aspect lock; live cropped preview at production size - **Animation / transitions** — easing curve editor, duration sliders, scrubber, replay - **Component variants** — render hover / focus / disabled / loading / dark side by side on one page - **Iconography** — stroke weight, corner radius, glyph on canvas - **AI-generated content** — prompt input + param sliders + side-by-side regeneration grid - **Anything else where "show me, I'll pick"** beats "ask me to specify a number" ## Controls must stay reachable while inspecting If the studio shows a list, grid, or scroll-long set of variations, **controls must be visible from every scroll position**. The user has to be able to drag a slider while looking at row 14, not scroll back to the top each time. Two approaches, pick by layout: - **Sticky bar** (`position: sticky; top: 0`) at the top of the scroll container. Keep the bar visually distinct — paper background + blur backdrop + bottom border — so it doesn't muddy the specimens scrolling behind it. Sticky pins relative to the *nearest scrolling ancestor with a defined boundary*; if you nest it inside a sized parent (a `
` with `margin-bottom`, a `
` with a fixed height), it stops sticking at that parent's bottom edge. Lift it to be a direct child of `` (or the page-wrap) so stickiness spans the whole page. - **Floating overlay** (`position: fixed`) for hotkey-toggled controls — e.g. press `d` to reveal. The portfolio's `.debug-ctl` pattern is this: pinned top-left, transparent until summoned. Use when the controls shouldn't occupy permanent screen real estate (final viewers shouldn't see them; the author can summon on demand). Anti-pattern: a top-of-page control panel that the user scrolls past and never sees again. They will tune blindly, give up, or guess. Either keep the controls in view *or* duplicate a compact control bar next to each variation row. ## Text & media lookdev — direct edit, highlight, comment, annotate When the artifact is a **blog post, doc, copy deck, script, or media set**, the user is not turning knobs — they're *marking up the work the way an editor marks a manuscript*. The studio renders the **real artifact WYSIWYG** (the actual rendered blog with its real components/media, not a raw-markdown textarea) and lets the user act on it directly. Building this for a doc review is mandatory: **do not paste a long file into chat and ask "what do you think?" — that's the boring wall of text the user is rejecting.** Stand up the