mcpField
C
corner-lasers

corner-lasers

github.com/mengto设计与 UI7.1k1.4k 次安装3 天前更新
代码仓库

关于 corner-lasers

用于设计以角落为锚点的激光构图,强调纤细光束、明亮发射点和局部氛围光,适合光束从角落或边缘交汇处发出的电影感效果。

主要功能

  1. 01以角落为锚点的光束构图
  2. 02两到三条纤细激光
  3. 03明亮发射点与集中辉光
  4. 04采用强调色的雾光效果
  5. 05克制的脉动或闪烁

适用场景

  1. 01制作角落光效或传送门效果
  2. 02为设计添加氛围激光视觉

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/mengto/skills --skill corner-lasers

安装后在 Claude Code 中输入/corner-lasers确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

demo/
index.html
PROMPT.md
source.json

详细介绍

转角激光技能

使用场景

  • 创建以转角为锚点的激光构图,包含纤细光束、明亮的发射器节点、辉光,以及氛围光或雾效。

工作流

适用范围

  • 仅用于基于转角的激光束构图,不适用于常规居中激光、粒子场景或无关的动态系统。
  • 当设计需要光束从转角或边缘交汇处发出或汇聚,并具有强烈的电影感发射点时使用。

视觉目标

  • 创建两到三束纤细激光,在明亮的转角发射器处交汇,然后沿不同方向向外延伸,形成几何房间转角或传送门接缝的效果。
  • 保持光束线条纤细锐利,中心呈炽白色,光晕克制,并让强烈的辉光集中在转角交汇处。
  • 让周围环境因发射器而柔和发亮,使转角看起来像是被体积雾照亮,而不是暗色背景上的平面线条。
  • 使用设计的主色或最鲜明的强调色为光晕和氛围着色,而非将颜色硬编码为蓝色,同时让最亮的光束核心接近白色。

实现指南

  • 如果输出支持,优先采用原生 WebGL 着色器处理或同等效果逻辑。
  • 将构图锚定在偏离中心的转角点,并从该点导出多个光束方向,而不是放置互不相关的独立线条。
  • 使用有符号距离或线段距离逻辑,让每束光保持纤细、清晰且连续。
  • 在光束交汇的转角发射器处添加集中的辉光或能量闪光;该热点应是构图中最亮的点。
  • 在光束周围添加细微的氛围光、雾或光线扩散,让效果更具沉浸感和空间感,而非平面效果。
  • 动态效果应保持克制:缓慢脉动、微弱的能量流动或轻柔闪烁都合适;避免混乱闪烁。

调节参数

  • 转角位置:将发射器点从边缘或角落向内移动,以构成画面。
  • 光束数量和角度:使用两到三束方向差异明显的光线。
  • 光束粗细:保持核心纤细,并单独调整外层辉光,让激光保持优雅。
  • 颜色:根据当前设计的强调色确定光晕和雾效的色调。
  • 氛围:调整辉光半径、雾密度、衰减和暗角强度,让转角保持明亮,同时避免界面泛白。

避免

  • 使用粗厚的霓虹光条,削弱激光线条的精确感。
  • 使用与转角发射器缺少局部联系的全屏雾效。
  • 当设计明显采用其他主色时,硬编码冷蓝色调。
  • 目标是偏轴转角光束效果,却采用对称居中构图。

评论

支持 Markdown