跳到正文
cccskills
免费在 GitHub 公开中文介绍

redesign

检查现有界面组件,找出三个视觉或交互问题,并提出符合项目设计规范的布局、留白、配色和代码改进方案,附简短的修改前后示例。

原文查看原文说明

Critique and improve the visual design of an existing UI component with concrete implementation guidance. Use when the user asks to redesign, restyle, reimagine, polish, or improve a component, screen, or interface, especially in React and Tailwind codebases.

ParadevAI/Paradev星标 15,720(GitHub 15,720 + cccskills 0)

实测评分 未实测

查看安装方法

适用场景

  • 优化现有组件
  • 检查留白和视觉层级
  • 改进 React 与 Tailwind 界面
  • 比较具体代码修改方案

中文介绍

功能

此技能会检查现有界面组件及其周边布局,并指出三个具体的视觉或交互问题。检查角度包括信息层级、留白、对比度、对齐和响应式表现。针对每个问题,它会提出布局或 Tailwind 修改建议,并用简短的修改前后代码片段展示关键的类名或结构变化。

适用场景

适合用于优化已经能够运行的界面,或收到“看起来不清楚”之类的反馈、但尚不清楚该改什么的情况。尤其适用于 React 和 Tailwind 项目,可结合项目已有的颜色、间距规范和组件约定提出调整。

使用示例

  • “请指出这个组件在视觉或交互上的三个问题,并提出改进方案。”
  • “请按照现有设计规范调整留白和信息层级,并展示修改前后。”

注意事项

分析前需要查看实际组件及其周边代码。如果同时要求实现修改,之后会按照该仓库规定的界面验证流程进行检查。

本介绍由 AI(OpenAI Codex)根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

文档检查

AI 根据 SKILL.md 的内容检查了需要注意的操作和使用前提。评分只依据实际运行的结果(实测对比)。

安全性发送数据、删除文件、执行命令等是否有说明
A良好资料要求实现修改后遵循仓库规定的界面验证流程。
安装难易度所需工具和 API 密钥是否少且有说明
A良好所给资料未提及 API 密钥或额外工具要求。

不计入评分。 由 AI(OpenAI Codex)于 2026年10月29日 评估。仅供参考,安装前请同时查看原文。

如果您认为评估有误,请申请复核

请写明哪一项有误以及原因。无需登录。我们会对照 SKILL.md 重新评估,并在此处更新结果。

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

包含的文件(2)

  • SKILL.md1.1 KB
  • agents/openai.yaml186 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Redesign

Inspect the real component and its surrounding layout before proposing changes. Reuse the repository's existing design tokens, primitives, and component conventions.

Respond in this order:

  1. Identify the component and file being redesigned.
  2. Name three concrete visual or interaction issues, such as hierarchy, spacing, contrast, alignment, responsiveness, or affordance.
  3. Propose specific layout, token, component, and Tailwind changes for each issue.
  4. Show a short before-and-after excerpt containing only the meaningful class or structure changes.
  5. If implementation was requested, make the changes and verify them using the repository's required UI workflow.

Keep the critique concise and grounded in the current code. Do not invent a new visual language when the repository already provides one.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

10x

免费有简介

检查 Superset 的使用情况,找出适合当前工作方式但尚未使用的功能,给出建议并介绍选项;用户选定后,可协助设置定时运行、并行工作区或共享任务等功能。

  • 查找尚未使用的 Superset 功能
  • 设置定时运行的智能体
  • 在多个工作区并行处理任务
ParadevAI/Paradev1.6万2026年10月29日 更新

automate

免费有简介

把重复任务配置为 Superset 自动化,整理智能体指令、定时或事件触发条件及运行工作区。经明确确认后创建设置,检查已保存的条件,并查看首次运行结果以调整指令。

  • 按日或按周运行任务
  • GitHub 新建拉取请求时启动任务
  • 收到 Slack 指定表情反应时触发
ParadevAI/Paradev1.6万2026年10月29日 更新

browser

免费有简介

通过 Superset 工作区的浏览器查看网页、点击、输入并检查截图或控制台信息,可用于预览运行中的网页应用、检查界面操作和表单流程。

  • 预览本地网页应用
  • 截取页面图像
  • 查看控制台错误
ParadevAI/Paradev1.6万2026年10月29日 更新

依据 Stripe 官方文档和 API 参数定义实现支付、订阅、发票及 Webhook 集成,涵盖产品选择、沙盒测试和事件处理,并通过 Webhook 判断支付与订阅状态。

  • 选择定期扣费产品
  • 实现 Checkout 或发票处理
  • 排查行为异常的 Stripe 集成
ParadevAI/Paradev1.6万2026年10月29日 更新

cdp-verification

免费有简介

通过 Chrome DevTools Protocol 操作正在运行的 Electron 桌面应用,复现界面问题并验证修改。按实际操作流程检查页面跳转,记录截图,并对照路由、滚动位置、焦点元素和保存状态等信息。

  • 在运行中的应用里复现界面问题
  • 检查修复后的页面行为
  • 验证包含页面跳转的操作流程
ParadevAI/Paradev1.6万2026年10月29日 更新

ci-triage

免费有简介

分析 GitHub Actions 失败日志,定位最早的有效错误,区分代码缺陷、环境问题、间歇性失败和原有故障,并对照基准分支说明失败与 PR 的关系及后续处理建议。

  • 调查 PR 检查失败原因
  • 区分不稳定测试与代码缺陷
  • 确认基准分支是否已有故障
ParadevAI/Paradev1.6万2026年10月29日 更新

查看 ParadevAI 的全部技能

报告此技能的问题