页面nue
建立网站的代理技能,这些网站看起来很好,感觉很好,而且可以转换.
技能 用什么来建造, (中文(简体) ), 它应该如何移动, (中文(简体) ), 为什么人们会回应,以及 如何发现它与克洛德·克罗德和任何代理商合作 SKILL.md 文档.
npx @codesudee/web-skills
第一个运行要求您的电子邮件将您注册到一个免费的 Pagenue 账户 。 然后它问您想要哪些技能( 或者按 Enter for all) 并安装到 ~/.claude/skills。见 安装 选项.
在安装前试试. 这个 网站 将每个技能显示为您可以打开的文件夹,并使用交互式演示.
为什么会这样
一个AI代理公司要求"一个登陆页"将愉快地产生一个通用的:默认字体,一个手卷式的淡入,一个空白的签入表. 其结果是有效的,但却是忘不了的,对它为之建造的人没有任何好处.
有两样东西可以解决,它们就是这批货所持有的:
- 一叠. 一旦决定要联系到哪个库(动画,卷轴,组件,框架,质量栏),那么每个构建都从好的默认开始,而不是即兴.
- 心理学. 出售或收集签名的页面在人类行为上成败,而不是在代码上. 6个经过研究的原则,写成一个代理人可以遵循的指示.
技能
| 技能 | 它会做什么 | 用它当 |
|---|---|---|
particle-globe-hero | 一个WebGL粒子地球英雄(没有3.js,约10 KB),在负载上聚集,光标周围的部件并用卷轴飞过相机,并有回放,Astro和香草接线 | 您想要互动的 三维英雄或滚动的飞过瞬间 |
light-rays-background | 一整行的发光线 紧紧地接住英雄 沿着每一节后面的页面 消失在文字后面 一个无依赖文件, 包含 React、 Astro 和 不建接线 | 你想要流出光线,发光线或背景,在滚动时不断移动 |
product-demo-video | 记录一个带有 Playwright 的网站,并在 Remotion 中编辑它: 动能类型,一个跟随光标的相机,被击打的切口,一个准备好的音箱和一个音乐床 | 您想要网站或网络应用的发布、宣传或README视频 |
launch-workshop-video | 出自一出出品链接的40秒出品电影:有五个可爱角色将出品建在一个小舞台上(crane-hoisted logo,头条在一幅横幅上,真实的截图被固定了起来,"如何工作"的箱子,一个事实检查员在每份申报上盖上印章,在URL上被遮住. 3名原创剧组看起来被重新涂上品牌,合成了beat-synced音乐和声音,帧-精确4K或1080p MP4,任意语言 | 您想要一个产品、应用或网站的发布、公告或宣传视频 |
ios-feel-motion | 橡胶波段翻转、弹簧预设、可中断动画和闪烁投影,具有真实的iOS值 | 构建可感受到本地感的滚动、拖放、工作表或动画 |
conversion-ux-psychology | 6项UX心理学原则,包括实践/避免指导以及道德保障 | 页面会出售某物或要求用户签名 |
apple-minimal-landing | 平和而类似苹果的登陆页外观:瑞士的地沟口味有斜纹塞里夫口音,两通小写头条,软灰色卡片,一通暖口音,以及静静地运动(分形-相片字旋转器,模糊显示,滑动的分页药丸),有精确的道具和Tailwind/Framer Motion配方 | 你想要一个登陆页 或产品站点 看起来很少, 优等和溢价 |
website-build-stack | 命名一个站点构建的默认库和引用, 以及何时使用每个库 | 启动任何网站、登陆页或前端构建 |
seo-toolkit | 路由器,将SEO的工作送到Claude-seo-claude、Geo-seo-claude和营销技能组合中,并对其进行验证 | 编写或审计任何网站的标准作业程序 |
它们被设计成一起使用:由堆栈决定工具,由心理学决定内容和流量.
堆着什么
| 需求 | 默认 | 为什么 |
|---|---|---|
| 动画 | 目标 | 时间线和ScrollTrigger 处理几乎每一个运动需要,它是免费的 |
| 平滑滚动 | 列尼斯语Name | 保持原生感觉的卷轴 sticky 和锚工作 |
| 动画反射组件 | 反应比特 | 215+ 已准备好的组件, 所以你不手卷常见效果 |
| 质量栏 | Vercel 网络接口准则 + 键 设计.md | 装运前对照审查的清单 |
| 尾风 v4 | 尾风- 特工技能 | 停止代理写 v3 时代的课和配置 |
| 框架 | 天体 | 默认为零联署材料,以岛屿作为互动部分 |
这些是默认的,不是规则。 现有工程的堆栈,或者你命名的堆栈,总是取胜.
心理学里有什么
| 原则 | 单行 | 示例 |
|---|---|---|
| 智能默认 | 人们很少改变默认,所以选择好 | 预选最佳计划 |
| 目标梯度 | 努力接近尾声,不要从零开始 | 上岗时间为20% |
| 对等性 | 先给,后给 | 注册前的自由部分结果 |
| 宜家效应 | 我们珍视我们建造的东西 | 先个性化;按钮表示"继续" |
| 厌恶损失 | 损失是收益的两倍 | "你会失去这3个项目" |
| 对比效应 | 价格是根据以前的情况来判断的 | 先显示溢价等级 |
每一个都写在技巧上,用推理,做什么,以及回避. 技能还包括护栏: 没有假的紧迫性、稀缺性、进展或审查. 原则应该使一页更清楚,而不是欺骗任何人.
不错
- 登陆页、定价页、登入和注册流程
- 营销和内容网站(Astro)和动画React/Next.js网站
- 使代理商在项目中具有一致的房屋风格
不是因为
- 内部工具、仪表板和文件。 心理学技能被限定为只有转换页面.
- 有固定堆栈的项目。 技艺告诉经纪人要跟随.
技能如何运作
技能是一个文件夹 SKILL.md文件顶部(前题)有一个 name (单位:千美元) description. 代理只读那些在启动时, 这几乎没有成本。 当您的请求符合描述时, 它会加载完整文件并遵循它 。 所以每个描述都说 何时 使用技能.
skills/
particle-globe-hero/
SKILL.md
assets/ ready-to-copy engine, React wrappers, CSS
references/
light-rays-background/
SKILL.md
assets/ rays.ts, a no-build rays.js, CSS, React wrapper, example page
references/
product-demo-video/
SKILL.md
assets/ recorder, Remotion project, sound generators
references/
ios-feel-motion/
SKILL.md
conversion-ux-psychology/
SKILL.md
apple-minimal-landing/
SKILL.md
website-build-stack/
SKILL.md
seo-toolkit/
SKILL.md
安装
一个命令将技能安装到 ~/.claude/skills因此,它们适用于所有项目:
npx @codesudee/web-skills
第一次,它要求您的电子邮件,并发送一个6位数的代码来签名(免费,没有密码). 然后它列出技能 并问你想要的。 类型编号 1,3 来选择一些,或按 Enter for all。 之后重新开始代理会话。 然后要求一些像"为X建立登陆页"和技能负载自己.
选项 :
| 旗帜 | 它会做什么 |
|---|---|
--list, (中文(简体) ), -l | 列出现有技能 |
--skill <name>, (中文(简体) ), -s | 只安装该技能( 可重复), 不询问 |
--all, (中文(简体) ), -a | 无需询问就安装每个技能 |
--project, (中文(简体) ), -p | 安装到 ./.claude/skills 仅用于当前项目 |
--dir <path> | 安装到任意目录 |
--force, (中文(简体) ), -f | 覆盖已安装的技能 |
--key <key> | 使用安装密钥从 您的账户 此运行 |
npx @codesudee/web-skills --list
npx @codesudee/web-skills -s conversion-ux-psychology
npx @codesudee/web-skills --all
npx @codesudee/web-skills --project
现有技能被跳过,除非你通过 --force因此,重跑是安全的。 当没有交互式终端( CI, 脚本) 时, 它会不询问就安装每个技能; 首先用 npx @codesudee/web-skills login <key> 或通过 --key。 。 。 .
要签了,跑 npx @codesudee/web-skills logout。 。 。 .
改为下载 : 签名于 pagenue.com (中文(简体) ),打开任何技能,并按 下载.zip打开它 ~/.claude/skills。 。 。 .
用法提示
要让堆栈每次应用,请添加一行到 ~/.claude/CLAUDE.md数字 :
Whenever building or redesigning a website, check and apply the `website-build-stack` skill first.
贷项
- 6个心理学原理从uxpeak视频"Apps人民无法停止使用背后的UX心理学"中被分解出.
- IOS运动值来自刚建. Mov的写作"iOS为什么觉得使用起来这么好"(M校对:soup)和苹果的WWDC18讨论"设计流体界面".
- 演示视频运动技术遵循了收集的实例: 即时动议,视频则与 剧作家 财务报告和审定财务报表 暂停 (个人和小团队免费;较大的公司需要领取回旋许可证).
- Apple-minmal起落架风格首先与 接收.sh 登陆页.
- 堆栈连接到上面的项目,它们保留自己的许可证.
支助
4个技能(website-build-stack, (中文(简体) ), conversion-ux-psychology, (中文(简体) ), seo-toolkit, (中文(简体) ), launch-workshop-video)是免费的,有一个Pagenue账户。 剩下的需要吗 页面nue Pro,9.50美元在发射时支付过一次(通常为19美元),这包括了添加的新Pro技能. 如果自由人节省了时间,你可以支持工作 高飞 或者说 付费页。 。 。 .
许可证
技能文件在 Pagenue 技能许可证:在任何工程中使用它们,但不要共享或转售文件. 0.5.0和更早的版本是麻省理工学院并保留麻省理工学院.