102 lines
4.3 KiB
Markdown
102 lines
4.3 KiB
Markdown
---
|
||
title: "Senior Developer Agent Personality"
|
||
type: source
|
||
tags: ["agent-personality", "engineering", "laravel", "livewire", "web-development"]
|
||
date: 2026-05-01
|
||
---
|
||
|
||
## Source File
|
||
- [[Agent/agency-agents/engineering/engineering-senior-developer.md]]
|
||
|
||
## Summary（用中文描述）
|
||
- 核心主题：Senior Developer Agent 角色定义 —— 专注于使用 Laravel/Livewire/FluxUI 实现高端 web 体验的全栈开发者 Agent
|
||
- 问题域：如何让 AI Agent 作为高级全栈工程师，遵循高级设计标准（Premium Design Standards）实施高质量 web 项目
|
||
- 方法/机制：通过角色设定（Identity & Memory）、开发哲学（Premium Craftsmanship）、技术栈（Tech Stack Expertise）、实施流程（Implementation Process）规范 Agent 行为
|
||
- 结论/价值：定义了"奢华感"（Premium）与"基础"（Basic）的区别标准，要求 Agent 实施高性能、高美感、可访问的 web 体验
|
||
|
||
## Key Claims（用中文描述）
|
||
- **FluxUI + Laravel/Livewire 组合** → 提供完整高端全栈实施能力 → 支撑快速构建可复用组件库
|
||
- **亮色/暗色/系统主题切换** → 每个站点必须实现 → 确保跨场景用户体验一致性
|
||
- **Three.js 集成** → 为英雄区（Hero Sections）提供粒子背景、交互式 3D 产品展示 → 创造沉浸式体验
|
||
- **玻璃拟态（Glass Morphism）+ 高级动画** → 通过 backdrop-filter blur + cubic-bezier 缓动曲线 → 实现奢华感 UI
|
||
- **60fps 动画 + 1.5s 内加载** → 性能与美感共存 → 满足高端用户体验标准
|
||
|
||
## Key Quotes
|
||
> "Every pixel should feel intentional and refined" — Premium Craftsmanship 理念核心
|
||
|
||
> "Innovation over convention when it enhances UX" — 创新驱动的高端实现哲学
|
||
|
||
> "Performance and beauty must coexist" — 技术卓越（Technology Excellence）核心原则
|
||
|
||
## Key Concepts
|
||
- [[Premium Craftsmanship]]：每个像素都应经过精心打磨，包含平滑动画、微交互和性能优化
|
||
- [[Laravel/Livewire Integration]]：PHP 全栈框架与响应式组件的集成模式
|
||
- [[FluxUI Component Library]]：专业 UI 组件库，提供所有可用组件
|
||
- [[Glass Morphism]]：玻璃拟态设计风格，使用 backdrop-filter blur + 透明背景实现高级视觉效果
|
||
- [[Three.js Integration]]：WebGL 3D 集成，为 web 体验提供沉浸式粒子背景和交互式 3D 展示
|
||
- [[Premium Design Standards]]：高端设计标准，强制要求亮/暗/系统主题切换、大留白、精致排版、磁性交互效果
|
||
|
||
## Key Entities
|
||
- [[EngineeringSeniorDeveloper]]：Agent 身份名称，专注于高端 web 实现的高级全栈开发者
|
||
- [[FluxUI]]：UI 组件库，提供所有专业组件
|
||
- [[Laravel/Livewire]]：PHP 全栈框架组合
|
||
- [[Three.js]]：WebGL 3D 图形库
|
||
|
||
## Connections
|
||
- [[engineering-rapid-prototyper]] ← extends ← [[engineering-senior-developer]]（原型扩展至高级实现）
|
||
- [[engineering-code-reviewer]] ← depends_on ← [[engineering-senior-developer]]（代码审查依赖实施）
|
||
- [[engineering-filament-optimization-specialist]] ← depends_on ← [[engineering-senior-developer]]（性能优化依赖实施）
|
||
- [[engineering-backend-architect]] ← extends ← [[engineering-senior-developer]]（后端架构扩展开发者角色）
|
||
|
||
## Contradictions
|
||
- 无已知冲突内容
|
||
|
||
## Implementation Patterns（技术实施模式）
|
||
|
||
### Laravel/Livewire 组件模式
|
||
```php
|
||
class PremiumNavigation extends Component
|
||
{
|
||
public $mobileMenuOpen = false;
|
||
|
||
public function render()
|
||
{
|
||
return view('livewire.premium-navigation');
|
||
}
|
||
}
|
||
```
|
||
|
||
### FluxUI 奢华卡片
|
||
```html
|
||
<flux:card class="luxury-glass hover:scale-105 transition-all duration-300">
|
||
<flux:heading size="lg" class="gradient-text">Premium Content</flux:heading>
|
||
<flux:text class="opacity-80">With sophisticated styling</flux:text>
|
||
</flux:card>
|
||
```
|
||
|
||
### 玻璃拟态 CSS
|
||
```css
|
||
.luxury-glass {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
backdrop-filter: blur(30px) saturate(200%);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 20px;
|
||
}
|
||
```
|
||
|
||
### 磁性交互效果
|
||
```css
|
||
.magnetic-element {
|
||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
.magnetic-element:hover {
|
||
transform: scale(1.05) translateY(-2px);
|
||
}
|
||
```
|
||
|
||
## Quality Standards（质量标准）
|
||
- 加载时间 < 1.5 秒
|
||
- 动画 60fps
|
||
- 完美响应式设计
|
||
- WCAG 2.1 AA 无障碍合规
|