Frontend Design · 前端界面设计

@public/frontend-design

查看空间 →

如何让 Agent 做出的网页更贴合产品？Anthropic 的 Frontend Design 指导前端开发 Agent 根据受众、真实文案和用户任务选择字体、配色、布局、动效与按钮措辞。适用于新建网页和改版现有界面。

介绍图片 1介绍图片 2
  • 交互文案
  • 前端开发
  • 界面设计
  • 网页排版

能力与使用条件

适用场景

  • 为独立书店、展览或产品发布活动设计有明确报名入口的落地页
  • 改进现有页面的信息层级、字体可读性和操作反馈

输入要求

  • 设计简报：服务谁、页面主题、用户首先要完成什么任务
  • 真实标题、日期、地点、按钮文案；改版时提供现有页面

输出结果

  • 基于简报的界面设计或前端实现
  • 帮助用户识别主任务的排版、配色、动效及操作文案

前置条件

  • 将 SKILL.md 提供给支持 Agent Skills 的开发工具
  • 主题不明确时先确认具体方向；实现时提供项目上下文

不适用场景与限制

  • 具体效果取决于素材、开发工具和项目约束；需在目标屏幕尺寸验收
  • 附图为书店活动页的设计示意，内容为虚构样例

说明性示例

  • 提示词：为山隅书店做周末活动页，面向附近读者。使用《城市漫步》、周六 14:00、二楼阅读室三项信息，让手机用户一眼找到报名入口。
  • 改版提示词：保留现有活动数据，把日期和地点放到标题附近；将按钮改为「预约席位」，并展示预约后的反馈。

资料依据

  • https://github.com/anthropics/skills/blob/2c5958ecac7cee2b583967a2c4981d0f4a75c579/skills/frontend-design/SKILL.md
  • https://github.com/anthropics/skills/blob/2c5958ecac7cee2b583967a2c4981d0f4a75c579/skills/frontend-design/LICENSE.txt

外部资源

内容由外部网站提供，平台不保证第三方文件的完整性、可用性或安全性。

访问官网 ↗登录后前往外部下载

外部文件的访问权限由第三方管理，本站无法限制其地址的访问。