zhishuo-apply-visual-taste

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

Apply the Zhishuo visual-taste system when a user needs a visual direction for a website, product UI, portfolio, presentation, campaign page, or an evidence-based review of an existing design. Produce a coherent style contract, reusable design tokens, licensed resource choices, and real-render acceptance criteria.

一句话选型结论

按资料字段整理

zhishuo-apply-visual-taste是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_6c41e2d5/zhishuo-apply-visual-taste
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_6c41e2d5仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791721999
正文体量5.7 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
zhishuo-apply-visual-taste当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

5.7 KB
模型实际读到的说明书原文,来自技能仓库

应用智说审美

把模糊的“做得好看”转换成一份可执行、可交接、可验收的视觉合同。先保护内容和功能,再选择一条主气质;不要从随机配色、圆角或装饰开始。

执行流程

1. 锁定真实任务

记录页面或成品的用途、主要用户、核心内容、主操作、目标载体、桌面与移动目标视口和必须保留项。已有设计时保存修改前截图;有指定参考图时标明它负责结构、气质还是交互。

完成标准:可以用一句话说明“谁在什么场景完成什么”,并列出至少一个必须保留项。无法说明时先补简报,不选风格。

2. 选择一主一辅

按场景读取 风格系统,选择一条主风格和最多一条辅助风格。用户明确指定风格时优先服从;没有指定时运行:

python3 scripts/create_visual_brief.py \
  --title "Anonymous product" \
  --scene knowledge \
  --output-dir /absolute/new/output

完成标准:视觉合同中只有一个主风格、一个明确艺术强度和一组避免项。不要把六套系统平均混合。

3. 建立视觉合同

使用生成的 visual-brief.md 与 visual-tokens.json 约束颜色职责、字体角色、网格、间距、材质、图像、动效和窄屏重排。先用真实内容建立结构与视觉中心,再加入一种有信息职责的效果。移动端必须重新分配层级,不得只把桌面画布缩窄或依赖横向裁切。

需要精确字段和交付目录时读取 输出合同。需要查看参考来源时读取 来源索引,只学习机制,不复制品牌或截图。

完成标准:另一个执行者无需猜测“高级、年轻、有感觉”的含义,就能根据 token 和限制开始实现。

4. 使用可发布资源

优先使用脚本输出的原创 CSS/SVG 基础资产,再根据项目内容创作新的图像、图标或纹理。使用任何外部素材前读取 授权边界。

完成标准:每个进入成品的非原创素材都有授权依据;仅供研究的截图和原型素材没有进入交付目录。

5. 在真实目标中实现

  • 新建独立网页:从生成目录的 assets/responsive-shell.html 开始,保留其中 min-width: 0、文本换行、筛选换行和移动端单列规则,再替换匿名内容。
  • 现有网页或应用:保留现有功能与数据流,把响应式骨架作为对照,先完成一个关键页面和两个目标视口。
  • PPT 或报告:正文保持阅读优先,只在封面、章节和关键结论页提高艺术强度。
  • 作品集或营销页:使用真实作品、产品或证据作为视觉中心。
  • 现有设计审查:按合同列出差异,只修最影响结果的 3–5 项。

完成标准:实现结果能回到视觉合同的具体条目,不依赖“看起来差不多”的解释。

6. 真实渲染验收

在用户实际使用的浏览器、设备、Office 或播放器中检查信息层级、可读性、响应式、交互状态、动效降级和素材授权。源码检查、构建成功和组件存在只能作为结构证据。

网页分支优先使用真正的设备仿真,不要用 macOS Chrome 的 --window-size=390,844 冒充 390 CSS 像素:

python3 scripts/check_web_render.py \
  --html /absolute/page.html \
  --output-dir /absolute/new/render-evidence

读取 render-report.json,确认报告里的 inner_width 分别为 1440 和 390,再目视两张截图。脚本的溢出、焦点和 reduced-motion 检查是程序证据,仍不能替代内容层级和整体气质的目视判断。

完成真实检查后回写结果:

python3 scripts/record_visual_result.py \
  --workspace /absolute/output \
  --structure passed \
  --desktop passed \
  --mobile passed \
  --interaction passed \
  --reduced-motion passed \
  --licensing passed \
  --evidence desktop-and-mobile.png \
  --notes "Inspected in the target browser."

完成标准:visual-acceptance.md 的每项都标记为 passed、failed 或 not-run,并附截图或明确人工检查边界。存在 failed 时不宣布视觉完成。

稳定规则

  • 默认底盘:quiet-functional;需要更强表达时加入 mature-editorial,默认艺术强度不超过 2 / 5。
  • 强风格只服务于明确场景:展示用 art-gallery,科技能力说明用 tech-stage,活动与消费内容用 vivid-pop。
  • 高级感来自可靠内容、清楚比例和一个视觉中心;黑底、粒子、渐变和大字本身不构成高级感。
  • 动效解释状态、结构或叙事节奏;普通鼠标跟随和整页持续运动不进入默认方案。
  • 一套作品只使用一种视觉语言;颜色、字体、图像、形状和交互共享同一组规则。

停止条件

  • 真实用途、核心内容或必须保留功能不清楚:停止选风格。
  • 只有未授权截图或图片:停止复制,改为提取机制或重制原创资产。
  • 出现三种以上主气质:停止加元素,退回一主一辅。
  • 缺少真实渲染证据:保留 not-run,不把程序检查冒充视觉通过。
  • 移动截图出现文字、按钮或筛选器裁切:保持 failed,先修复重排再继续装饰。
  • 移动测试报告的 inner_width 不是目标 CSS 宽度:停止验收,先修正设备仿真工具。

常见问题

5 问
答案由本站依据条目字段整理
zhishuo-apply-visual-taste怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_6c41e2d5/zhishuo-apply-visual-taste。安装方式为未标注。装完刷新技能列表或重开客户端。

zhishuo-apply-visual-taste支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

zhishuo-apply-visual-taste权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

zhishuo-apply-visual-taste收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

zhishuo-apply-visual-taste用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。