
效果预览
相似 Skill
查看全部 Skills你将获得
- 完整网站打包成一个自包含的 HTML 文件,离线即可打开;Haywren 示例有 25 个互相连通的路由,从解决方案、定价到日志、关于、联系和法律页面
- 真正可用的工具:可交互的农田看板、每个解决方案页的专属组件、计费切换与硬件估算器、自动化规则构建器和多步注册
- 所有图片统一为扁平矢量插画风格,手机样机实时显示界面,使用 Bricolage Grotesque、Figtree 和 Geist Mono 字体,按需移植到你自己的框架
适合
- 希望用亲切插画风代替图库照片的农业科技、食品、园艺、户外和外勤服务产品
- 需要整套页面(解决方案、定价、日志、关于、下载)而不只是一张落地页的 App 团队
- 想先拿到独立网站,或用 Vue、React、Astro、Next.js 实现同一套设计的团队
不适合
- 现成的后端:注册、联系和获取 App 链接的表单只在页面内确认,不会发送、创建或扣费
- 需要摄影照片的品牌:所有图片都是同一种扁平矢量插画风格
- 想换一种视觉方向的项目:天空外壳、风景横带、手机样机和蓝色横带本身就是这套设计
品牌建立与视觉规范网站与数字体验制作落地页风格锁定成果可编辑Farm BlueFarm HeroFarm LandscapeFarm Phone
适合做落地页
关于此 Skill

描述你的产品和需要的页面,就能拿到一套完整的插画风网站:圆角天蓝渐变 Hero,底部升起农场风景,一部倾斜的小手机展示 App,再配上彩色功能卡片和饱和蓝色产品横带。交付物是一个自包含文件,任何浏览器都能打开,离线可用。

你将获得
- 整套页面:首页、平台、解决方案页、自动化、定价、日志与文章、关于、联系、App 下载、注册、隐私、条款和精心设计的 404
- 带真实工具的内页:可切换区间的农田看板、每个解决方案页的专属组件、硬件估算器和自动化规则构建器
- 所有位置统一的扁平矢量插画风格,手机里的 App 画面是实时界面
- 筛选、搜索、轮播和会校验并确认的表单,动效克制并尊重减少动态效果的设置
- 按需在你自己的技术栈里以组件和路由实现同一套设计

如何使用
- 提供品牌、受众、产品或解决方案,以及需要的页面;粗略笔记即可,起草的事实会列出供你确认
- 提供你拥有的插画,或让它为每个位置生成一张风格一致的插画
- 在浏览器里打开成品文件,逐页点一遍,用大白话提修改

新插画由你的 Agent 用其图像工具生成,可能产生该工具的使用费用。字体和图片都已内嵌在成品文件中。
开始前需要准备什么
- 你需要提供
- 品牌名称、目标受众和一段产品简介 · 带有用描述的产品、解决方案或故事,以及需要的页面 · 你拥有的插画,或同意生成一套风格一致的新插画
- 依赖项
- Agent 所在电脑需要 Node.js 18 或更高版本,用来运行随附脚本,生成单个离线网页文件 · 生成文件时需要联网,字体只下载一次并嵌入文件 · Agent 中可用的图像生成工具,或你自己拥有的插画,用于产品专属的配图
- 外部成本
- 新插画由你的 Agent 自带的图像工具生成,可能产生该工具的使用费用。使用你自己的插画不产生费用,示例中的中性农场风景也可继续用于乡村、食品或户外品牌。
- 最近实测
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…









