即刻App年轻人的同好社区
下载
App内打开
stean
72关注1被关注0夸夸
stean
2月前
stean
2月前

歸藏: 最近很多人问我，为啥我用 Claude 写的应用就没那么漂亮？ 所以教大家一些非常简单的技巧，用上了以后你也能搞定这么漂亮的界面 👇下面是具体的技巧和完整提示词 完整内容这里：https://mp.weixin.qq.com/s/tUOAfd4OI56QxD94-0PPKw 1️⃣第一个技巧： 不用非得用语言来描述你想要的界面样式，可以去一些设计平台找一些你喜欢的设计稿将图片上传到图片让模型参考。 如果你不知道去哪找的话，国内推荐站酷、海外的话推荐 Dribbble 和 Layers。 在跟 Claude 说的时候就可以忽略那些不好描述的地方，重点描述静态图片无法表现的部分，比如下面的这个卡片组件。 我就让 Claude 注意交互的动画和输入框聚焦之后的渐变动画上，界面内容和风格就让他按图片生成。 2️⃣第二个技巧： 在让 Claude 生成界面的时候，你会发现 Claude 生成的页面没有图片，本来应该是图片的部分经常是空白的，这个就很影响结果的视觉表现。 其实我们可以要求他引用一些在线的图片来填充到页面需要图片的部分。 这里首先推荐 unsplash，他是一个开源图片网站，里面有世界各地的设计大神上传的图片，而且可以直接引用。 可以看下面加上图片之后的卡片是不是就好看很多了。 3️⃣第三个技巧： 另外 claude 在生成页面的时候本来应该是图标的地方，他喜欢用 emoji 来代替，emoji 也很好，但是在一些严肃的页面上就会显得格格不入。 这里可以要求 Claude 在生成页面的时候引用在线的图标库，比如Font Awesome或Material Icons，这些开源图标库可以通过 CDN 直接引用，而且不需要部署。 可以看到引用了 Font Awesome 图标库的图标之后我们的界面变得更加简洁和整齐。 4️⃣第四个技巧： 我们常用的前端样式代码是用 CSS 写的，但是 CSS 本身的一些样式其实没有太考虑美观度的要求。 这就导致你让 Claude 写样式的时候他就会过渡自己发挥，美观度也就没办法得到保障，而且你对样式要求多之后他要从头写的 CSS 也就越多浪费很多 Token。 这里我们可以要求 Claude 用 CDN 引用 TailwindCSS 来写组件样式，Tailwind CSS 封装了一套非常美观和简洁的样式，可以让 Claude 直接调用，确保在色彩、响应式和基础组件的美观度不出大问题。 🌟提示词： 方括号［］的部分就是你需要填写的部分。 我需要创建一个[具体描述你的页面/组件类型]，请帮我生成美观且响应式的HTML+CSS代码。 ## 设计参考 我希望设计风格类似于以下参考： [上传参考图片或描述设计灵感来源] ## 技术要求 - 请使用HTML、TailwindCSS和少量必要的JavaScript - 引用Tailwind CSS（v3.0+）通过CDN - 页面需完全响应式，在移动设备和桌面端都能良好显示 ## 图片资源 - 请使用Unsplash API提供的图片作为内容图片 - 根据内容主题选择合适的关键词 ## 图标要求 - 使用Font Awesome或Material Icons等专业图标库 (通过CDN引用) - 避免使用emoji作为图标替代品 ## 交互细节 [描述任何需要的交互动画或效果，例如：] - 按钮悬停时有轻微放大效果 - 表单输入框聚焦时显示渐变边框 - 卡片在悬停时有阴影加深效果 ## 特别注意 - 确保代码干净且有适当注释 - 提供完整可运行的HTML文件，包含所有必要引用 - 优化视觉层次和间距，确保设计美观专业 5️⃣如何生成设计稿： 昨天群里一个朋友提了一嘴能不能转设计稿想了一下，居然还真可以，而且可以帮你生成带自动布局的 Figma 设计稿和对应可复用的组件。具体的方法也很简单 只需要将你生成的代码部署到线上，如果你用 Claude 或者 POE 都有这个功能，如果你用的软件没有发布能力的话可以用这个 http://yourware.so 产品。 获得了线上的链接之后，我们只需要使用 http://html.to.design 这个 Figma 插件就可以很好的将网页转换为

00
stean
2月前
stean
3月前
stean
3月前

李锦汐: 打工的目的积累自己的生产资料，最终归宿就是做个人事业。 我不鼓励大家盲目跳槽，更不支持大家自行创业 —— 我要说的是： 如果你身在大公司、大平台里面，最好的方式其实是好好利用这个机遇，充分借助和依托平台的光环，去做一些能够积攒自己口碑、以及打造别人对你的信任和认可的事。 大部分职场思维，得到一份工作做职场分内的事，在项目里一步一脚印，特别专注提升自己专业技能。 这个想法在过去10年可以，一份工作可以干一辈子。但现在是新个体时代了，外界发生翻天覆地的变化，Deepseek横空出世，将大量替换重复没有创造力的机械式工作。 从个体崛起的角度来看，所有人都身处在巨大的市场上，我们得时刻向外看，什么样的能力正在变得越来越值钱。应当把「出卖时间」的思维方式，转变为「积累资产」的思维方式。 搞钱先搞脑，认知是关键。 如果你的目标是不断拿到更高回报、不被企业淘汰，最重要去做： 1、不要只关注职场专业技能，打磨自己直接面向市场交易的能力。 不是关注如何画好产品原型，而是看自己能否找到一批用户群体可以向她们提供职场转岗经验，解决30岁职业危机等等。 把你之前积累的技能、专业经验去产品化，卖产品和服务，需要有面向市场的能力，才能赚取更高回报。 2、持续让自己破圈，扩大认知。 《影响力》里有一句话，你是你身边六个人的平均值。 如果你身边都是职场人，那么你关于赚钱的认知无外乎就是在企业里工作，交付专业能力换取薪资。但如果你身边都是创业者，你每天话题一定是行业动态、市场需求、目标群体、变现方式、产品利润。 人人都在说，“你绝对挣不到认知之外的钱”。可认知的本质不就是信息么？ 信息来自交流，高质量的信息，从来只存在于小圈子中、去找有经验的人请教。人生是一场布朗运动，不断地链接、随机的碰撞才会有更多可能。 消亡不是自然的过程，而是碰撞尝试得太少。

00
stean
3月前
stean
5月前

MooreAI: 使用 Windsurf 创建 Sprunki 游戏落地页（HTML），无任何依赖，超低成本上站 - 第一步：复制提示词，使用 Chat 模式 初始化上下文环境 - 第二步：输入关键词、Hero 结构、Hero 文案、配色文案；抽卡不同的配色和布局 - 第三步：选中不满意的布局代码，使用提示词完成调整 - 第四步：针对每一个区块进行生成，集成了上下文环境后，配色和布局会自动选择适合上下文的方案 当然，AI Coder 有一定概率抽卡，可以尝试不同颜色组合的配色方案，不要试图一键生成那样效果就会变得很差 完整内容已经投稿到了 @哥飞 的社群 提示词分享： # 游戏落地页设计智能助手 请首先提供基础信息，后续将根据您的具体要求进行设计： ## 一、基础信息采集 请提供以下游戏基本信息： 1. 游戏名称与类型 2. 核心关键词（3-5个） 3. 主要游戏特色/卖点 4. 品牌调性（硬核/休闲/二次元） 5. 目标用户群体 6. 游戏文案信息（简介/世界观/核心玩法/slogan） ## 二、整体设计方案 - 前端技术栈：HTML + Tailwind CSS + JavaScript - 一个 HTML 页面，包含多个区块，每个区块可以单独开发 - 响应式设计，移动端优先 - 判断需要图标的页面元素（如导航栏、按钮、信息提示）,确定每个图标需要传达的功能和情感，基于 Lucide 图标库生成 SVG 图标 - 根据页面的使用场景（如标题、正文、按钮）确定所需字体的特性，确保选择的字体在风格上与其他设计元素（如颜色、图像）协调统一，使用 Google Fonts 提供的字体 - 创建合适的布局和动画效果，使页面元素在视觉上具有平衡和美观的样式 # SEO 方案 - 利用关键词研究工具，发掘相关的长尾关键词和语义相关词 - 考虑用户搜索意图，包括信息型、导航型和交易型关键词 - 融入行业术语和专业词汇，提升内容权威性 - 包含问答式关键词，针对语音搜索优化 - 生成至少1000字的SEO关键词列表 - 确保关键词密度在3%左右，避免过度优化 - 对生成的关键词进行分类和优先级排序 # 配色方案 - 使用 Tailwind CSS 提供的配色方案 - 分析用户描述的情感或主题，选择与之对应的Tailwind CSS颜色 - 对主题文案使用三色渐变，并在文案内容中使用对应的颜色 - 在页面的背景、按钮或装饰元素上应用渐变类。 - 根据实际效果调整渐变方向和具体的颜色，以确保视觉效果最佳 ## 三、Hero区块设计 1. 深度策略分析 - 品牌DNA解析 - 用户痛点映射 - 价值主张提炼 - 差异化定位 2. 自动选择布局方案 A. 独占式布局 - 将主题和背景图像合并，居中显示。 - 使用背景渐变色，确保三色渐变突出主题。 B. 左右结构 - 左侧文案区 - 右侧展示区（图片/视频） - 渐变边框效果 3：文字方案 - 使用Tailwind CSS类，如 `text-lg`、`font-bold` 为标题 - 副标题可以使用 `text-gray-500` - 重要提示可以用 `rounded-full border p-2` 实现圆框效果 ```

00
stean
7月前
stean
7月前
stean
8月前