# Lookdev > 人在回路中的 Web 工作室，通过肉眼调优 AI 生成的输出。搭建本地交互式工作室（滑块、选择器、拖拽手柄）或用于文本与媒体的内联编辑/高亮/评论标注工作室，而非猜测数值或交付静态对比网格。触发词：lookdev、调优、微调外观、对比变化、交互调整、编辑标注、审阅标注。 - Skill: `kscz0000/lookdev` (Agent Skill) - Install (CLI): `npx skillmds@latest add kscz0000/lookdev` - Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/lookdev/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - License: MIT - Author: kscz0000 (https://skillmd.com/u/kscz0000) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/kscz0000/lookdev --- ## 何时使用 当用户说"lookdev"，或要求调优/微调/迭代外观、凭感觉对比变化，或审阅/编辑/标注博客文章、文档、文案或媒体集时使用。当"给我看，我来选"胜过让用户指定一个数字时使用，当你本应交回一个静态网格或一堵文字墙供审阅时使用。 _来源：[connerkward/lookdev-studio-skill](https://github.com/connerkward/lookdev-studio-skill) (MIT)。_ # Lookdev 当用户说 **"lookdev"** — 或者以下任何一个：*调优*、*微调*、*迭代外观*、*对比变化*、*让我调整*、*让我编辑/标注/标记*、*审阅此文章/文档/文案* — 他们的意思是**构建一个用户直接操控的浏览器内交互工具**。不是 N 个变体的静态网格。不是让他们指定数字的问答。不是让他们在聊天中阅读和回复的一堵文字墙。而是一个实时工作室，用户对制品执行操作，变更被捕获。 **两种工作室形态 — 根据调优对象选择：** - **视觉参数 lookdev** — 制品的*外观*由数字/选择决定（颜色、字体、布局、图像处理、动画、3D）。控件 = 滑块、选择器、拖拽手柄。这是本技能的主体内容（见下文）。 - **文本与媒体 lookdev** — 制品是*文档、博客文章、文案或媒体集*，用户正在编辑/策划：改写句子、删减无聊段落、高亮、留边注、标记"此处需要图表"/"图片错误，替换"。控件 = **直接内联编辑 + 选区高亮 + 锚定评论 + 媒体标注**。见下方专门章节。**博客文章/文档/脚本审阅就是此模式 — 永远不要交回一个长 markdown 文件让用户在聊天中回应。搭建标注工作室。** ## 覆盖范围 任何用户凭感觉而非规格做出的视觉决策。按需扩展此列表： - **图像处理** — 抖动、半调、色调分离、ASCII、模糊、边缘、量化、马赛克、调色 - **颜色** — 色板提取（显示覆盖率百分比）、各频段选择器、饱和度/对比度/伽马曲线、和谐预设、主题令牌 - **排版** — 字体选择器、字号/字重/行距/字距/行长、实时样本文本、回退字体栈 - **布局、定位、取景、间距** — 可拖拽和可选择的元素；缩放手柄；外边距/内边距标尺；对齐参考线；对齐网格；锁定宽高比切换 - **裁剪与取景** — 带宽高比锁定的可拖拽裁剪矩形；生产尺寸的实时裁剪预览 - **动画/过渡** — 缓动曲线编辑器、时长滑块、擦洗器、重放 - **组件变体** — 在一页上并排渲染悬停/聚焦/禁用/加载/深色状态 - **图标** — 描边粗细、圆角半径、画布上的字形 - **AI 生成内容** — 提示词输入 + 参数滑块 + 并排重新生成网格 - **其他任何"给我看，我来选"** 胜过"让我指定一个数字"的场景 ## 控件在检视时必须保持可达 如果工作室显示列表、网格或长滚动变体集，**控件必须在每个滚动位置都可见**。用户必须能够在查看第 14 行时拖动滑块，而不是每次都滚回顶部。 两种方案，根据布局选择： - **粘性栏** (`position: sticky; top: 0`) 在滚动容器顶部。保持栏的视觉区分 — 纸张背景 + 模糊背景 + 底部边框 — 这样它不会与后面滚动的样本混淆。粘性定位相对于*最近的有定义边界的滚动祖先*；如果你将它嵌套在一个有尺寸的父元素内（一个有 `margin-bottom` 的 `
`，一个有固定高度的 `
`），它会在该父元素的底边停止粘性。将其提升为 ``（或页面包裹层）的直接子元素，使粘性覆盖整个页面。 - **浮动覆盖层** (`position: fixed`) 用于快捷键切换的控件 — 例如按 `d` 显示。组合的 `.debug-ctl` 模式就是这种：固定在左上角，召唤前透明。当控件不应占据永久屏幕空间时使用（最终查看者不应看到它们；作者可按需召唤）。 反模式：用户滚过就再也看不到的页面顶部控制面板。他们会盲目调参、放弃或猜测。要么让控件保持可见，*或者*在每个变体行旁复制一个紧凑的控制栏。 ## 文本与媒体 lookdev — 直接编辑、高亮、评论、标注 当制品是**博客文章、文档、文案稿、脚本或媒体集**时，用户不是在拧旋钮 — 他们是*像编辑标记手稿一样标记作品*。工作室渲染**真实制品的所见即所得**（实际渲染的博客及其真实组件/媒体，而非原始 markdown 文本区）并让用户直接对其进行操作。为文档审阅构建此功能是强制性的：**不要将长文件粘贴到聊天中问"你觉得怎么样？" — 那正是用户拒绝的无聊文字墙。** 搭建标注工作室让他们就地编辑。 ### 四项可供性（构建所有适用的） 1. **直接内联编辑。** 每个文本块就地可编辑 — 点击段落/标题然后输入。每个块使用 `contentEditable`（或点击切换为 `