
效果预览
相似 Skill
查看全部 Skills你将获得
- 一个自包含网站文件,字体和图片已内嵌,任何浏览器打开、离线可用;已有框架项目时则移植进该项目。
- 每个案例都配包装主图和使用场景图,另有需求估算器、月付季付套餐、流程标签页和带校验的联系表单。
- 标志性的马克笔标题、团块人像、贴纸和彩色服务卡片,见于 21 个页面、16 张图片的示例。
适合
- 想把个人风格放到网站上的独立品牌和包装设计师。
- 能把作品页当作委托案例、把服务做成套餐的摄影师和插画师。
- 能把作品页改成产品系列、把流程改成制作过程的面包店和食品手作人。
不适合
- 真实的表单投递或收款;联系表单和估算器只显示如实的演示结果。
- 想要安静、极简或企业感,而不是马克笔字体和贴纸风格的品牌。
- 把虚构的 Juno Halvorsen、她的客户或评价当作真实作品展示。
品牌建立与视觉规范网站与数字体验Build Agency Site风格锁定成果可编辑DoodleHeroServiceWork
关于此 Skill

Marker-Doodle Brand Studio 用来为独立品牌或包装设计师搭建一个大声、温暖、手绘感十足的网站:暖纸色底、墨色正文和三种马克笔色(钴蓝、番茄红、向日葵黄),马克笔字体的大标题,钴蓝团块里大笑的抠像人像,色块服务卡片,以及真实的包装摄影。示例是虚构设计师 Juno Halvorsen,共 21 个互相连通的页面。

你将获得
- 一个自包含的网站文件,字体和图片都已内嵌,任何浏览器直接打开,离线也能用。如果你已有框架项目,则把设计移植进该项目。
- 完整的工作室网站:可筛选、搜索和排序的作品页,四个含包装主图、场景图和可复制色板的案例,服务总览与四个服务详情页,关于、四篇文章的洞察栏目、流程、联系、隐私和 404 页。
- 可估算起步价和周期、并自动带入联系表单的需求估算器,以及支持月付和季付切换的套餐。
- 带加载和成功状态的联系表单校验、配时间线图的流程标签页,以及文章阅读进度条。
- 首屏一次性入场、红色下划线描绘、跟随指针转动的大眼睛、悬停即暂停的客户名滚动条,开启减少动态时全部保持安静。

如何使用
- 提供你的名字、设计方向、含客户与成果的项目、带真实价格的服务和联系方式。缺少的文案会先写成合理的占位内容,并列出请你确认。
- 发来一张白底抠像人像和一张黑白方形人像,以及每个项目的包装主图和使用场景照片;也可以让 Agent 按同样风格生成。
- 在桌面和手机上逐页打开,试一遍筛选、估算器和联系表单,再提出修改。

字体为 Permanent Marker、Bricolage Grotesque 和 Kalam,已内嵌进文件。新图片由你的 Agent 自带的图像工具生成,可能产生该工具的使用费。
开始前需要准备什么
- 你需要提供
- 你的名字、设计方向和一段简介 · 含客户、年份和成果的项目,以及带真实价格的服务和联系方式 · 一张抠像人像和项目照片,或同意先生成替身图片
- 依赖项
- Agent 所在电脑需要 Node.js 18 或更高版本,用来运行随附脚本,生成单个离线网页文件 · 生成文件时需要联网,字体只下载一次并嵌入文件 · Agent 自带的图像工具或你自己的照片,用于人像、包装主图和场景图
- 外部成本
- 新的包装主图、场景图和人像由你的 Agent 自带的图像工具生成,可能产生使用费。没有图像工具时可用自己的照片;工作室、过程和贴纸图片可以保留。浏览示例不产生费用。
- 最近实测
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…









