Frontend Craft · v4.5

主方法；来自用户提供的Opus自编技能，经本地研究与Codex适配，不是模型内部能力导出或官方技能。用户方向、目标平台、现有系统决定具体风格。每次前端同时读取 creative-toolchain 盘点资源/交接；不用另起一套规格，不预读全部参考和软件。

当前用户默认新方向偏当代图形/动态系统：大色块、厚宽展示字、精确矢量和有身份的真实运动；不以暖纸/衬线/慢淡入代表普遍高级。明确其他艺术方向与既有品牌优先，具体实施按contemporary-graphic读取。

用户明确认可Koto/Mews的整体质感与完成度；当代商业品牌/作品级任务优先以mews-calibration校准字图/真实材质/图形系统/动态关系，不抄品牌皮肤、不把简单动图示例当同等完成度。

一条工作链

1. 审查 brief、指令、现有代码/未提交改动、真实内容/资产、平台、主要任务与可用能力。先区分精修与明确重做，保留应持续的品牌/路由/业务事件与可访问行为；不因自己的默认偏好否定静态、黑白、高饱和、繁复。可逆细节自行决定，只问影响范围或必需缺失输入的问题。
2. 契约 先确定媒介、主对象/任务、持续状态与空间/时间关系，再组织版式；新产品/作品结构或PPT式割裂读experience-structure，不从默认卖点整屏开始。已有规格或一份轻量记录确定主体概念、信息/操作路径、布局与token、资产角色、适用状态和证据目标。分类为Utility-first / Balanced Product / Editorial / Brand / Portfolio / Immersive / Experimental / Award；按区域安排Spectacle与Utility。新且未定的方向提出2–3个结构不同的假设，按主体/任务选一个；不是时间戳随机选风格。大项目补必要PRD/技术规格后继续已授权实现。 高表现力方向先读expressive-composition：让主体产生改变结构/字图关系/形态/交互的签名，允许错位、重叠、裁切、极端尺度与非标准节奏。先组织内容力量，再制定本项目格网；整齐的网格＋漂亮标题不算概念完成。操作与阅读保持可靠，不把“受控”误读为保守。
3. 编排 当前可见区域有清楚的主焦点与主变化；跨视角保留有意义的主体/状态/锚点，焦点转移不等于每屏重开场。配角/环境/微反馈有层级。用户要浓重动效就充分做入场、章节、转换、反馈与材料，但高频命令立即响应、读字区稳定。先定时序/所有权/移动/减弱动态，再在稳定布局上实现；没有动态要求也可静态成立。
4. 切片 沿用已有栈，先做代表性真实流程：输入→校验→业务/服务/持久化→反馈/恢复。Demo显式标注；可点外壳不等于完成。数据/API/状态机/存档/算法改动用有效行为测试先复现再修复；纯视觉用相应画面检查。
5. 扩展 统一组件/语义/token，补适用的加载/空/错误/禁用/取消/重入与长内容。移动端重新编排，Windows稳定工作区和局部滚动，Web/App分别设计输入/密度。不用hover独占功能，不强造无关状态或平台。
6. 验收 实际页面和主操作；静态帧、时间过程、任务压力分别检查。键盘/焦点、响应式、减弱动态与相关性能证据在同一版本共用。修复观察到的问题并定向复查；无新变化不无限评审。交付入口、关键检查、实际未知，不编造满分/获奖/生产认证。

实现约束

• 主体、文本/图像裁切、字体/色彩、空间、运动共同解释产品；黑底球体、bento或大字可以用，须来自本次概念，不成为全项目默认模板。移除logo/替换copy后仍看主体特色；现有品牌小修不重开概念。
• 一个真源、一个状态所有者、一个动画属性所有者。动效可打断；组件/场景离开时清理订阅、timeline、RAF、音频与GPU资源。Lenis只有一个驱动，GSAP作用域清理，Vanta静态fallback/destroy，React Bits重构到本项目契约；不用同时装四库。
• 第三方导入先核对项目依赖与版本；连续pointer/scroll/RAF值由refs/motion-values/现有控制器持有，真实选择与可访问状态仍由应用持有。Next等栈按实际客户端边界隔离浏览器能力，不因此迁移工程。真实字体、中英长文、按钮/表单对比与比较列光学关系实际检查，不靠clamp或“看起来满格”保证。
• tokens与布局沿用现有权威层；适度光学例外可记录，不按数字机械禁用艺术表达。transform/opacity优先用于高频DOM运动；布局/paint/GL效果按范围测量，不谎称compositor永远免费。
• 无障碍与操作正确性是要求；运动强度不是质量分数。减少运动保留完整内容与反馈；重场景渐进加载与有意义静态fallback。自适应由观察驱动，不伪造GPU、电量、低功耗检测。
• Adobe/Figma按当前宿主专用技能和真实权限；没有调用/导出/同步不声称成功。创作要求不默认授权上传私有资产、发布、付费或对外发信。明确已有授权不重复询问。

按阶段加载

同一内容完整读过且仍在上下文可复用；文件变更再读。窄修复只读取相关段；新品通常契约→tokens/layout→相关组件/运动→相关验收，不加载整个索引。

可选实现辅助

scripts/check-a11y.mjs、check-tokens.mjs是启发式；shoot.mjs捕获页面，静态截图不证明时序/任务；budget.mjs报告构建目录体积而非初始加载或Web Vitals。先看 --help 和 local-adaptation。assets/motion-bridges.mjs是既有四库适配；assets/quality-governor.mjs是重场景可选纯策略，不增加常驻依赖或另一RAF。项目集成仍要实际验证。